React router v6 没有路由匹配位置

Question

我想使用参数将用户导航到特定的网址，并将其视为带有查看项目按钮的列表项目。当我单击查看按钮项目时，收到以下警告消息

No routes matched location "/explore/0xD78Fb56DB0b68F9766975FEEbf7bFd0CF65C9F11" 

在我的 App.js 中我有这个

<BrowserRouter>
      <Header style={styles.header}>
        <Navbar />
        <Account />
      </Header>
      <div style={styles.content}>
        <Wrapper>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="create" element={<Creation user={account} />} />
            <Route path="/explore" element={<Explore />} />
            <Route path='/dashboard' element={<Dashboard />} />
            <Route path='test' element={<Test />} />
          </Routes>
        </Wrapper>
      </div>
      </BrowserRouter>

所有这些路线现在在 /explore 路线中工作正常我有我的项目列表

我做了类似的事情（我遵循了反应路由器文档）

return (
      <div style={{marginTop:'5em'}}>
        {isInitialized ?
        <div className='wrapper'>
          {eventArray.map(infoItem => (
            <div key={infoItem.id}>
            <CardEvent img={infoItem.pathImg ? infoItem.pathImg : lpass} 
            title={infoItem.idName} 
            date={infoItem.eventDate.toString()}
            />
            <Link to={`/explore/${infoItem.id}`}>View event </Link>
        </div>
        )
        )}
        <Routes>
        <Route 
        path='explore/:id'
        element={<Test />}
        />
      </Routes>
      </div> 
      : <p>Error</p>
      }
</div>

我在这里做错了什么？

Answer 1

渲染组件的路由Explore需要指定一个尾随通配符匹配器"*"，或者 splat ，这样后代路由也可以被匹配。

<Routes>带有 splats 的后代

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="create" element={<Creation user={account} />} />
  <Route
    path="/explore/*" // <-- add trailing wildcard matcher
    element={<Explore />}
  />
  <Route path='/dashboard' element={<Dashboard />} />
  <Route path='test' element={<Test />} />
</Routes>

请记住，<Link to={`/explore/${infoItem.id}`}>View event</Link>指定绝对路径"/explore/:id"并Routes从父路由构建嵌套组件：

<Link to={`/explore/${infoItem.id}`}>View event</Link>

...

<Routes>
  <Route 
    path='/:id' // <-- Omit "/explore" from path
    element={<Test />}
  />
</Routes>

或者要使用相对路由，请省略相对于 的前导"/"斜杠和链接infoItem.id。

<Link to={`${infoItem.id}`}>View event</Link>

...

<Routes>
  <Route path=':id' element={<Test />} />
</Routes>

更新

那么是否有办法在新页面中渲染而不是在我的组件下渲染？那么如果我去的"/explore/event1" Test不是出现在事件列表下而是出现在另一个新的空白页面中呢？

是的。为此，我建议进行一次小重构，将其移至<Route path=':id' element={<Test />} />主路由。使用布局路由来渲染Outlet并嵌套专门用于 的索引路由Explore和 的嵌套路由Test。Routes从 中删除代码Explore。

例子：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="create" element={<Creation user={account} />} />
  <Route path="/explore">
    <Route index element={<Explore />} />   // "/explore"
    <Route path=":id" element={<Test />} /> // "/explore/:id"
  </Route>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="test" element={<Test />} />
</Routes>

探索

return (
  <div style={{marginTop:'5em'}}>
    {isInitialized ?
      <div className='wrapper'>
        {eventArray.map(infoItem => (
          <div key={infoItem.id}>
            <CardEvent
              img={infoItem.pathImg ? infoItem.pathImg : lpass} 
              title={infoItem.idName} 
              date={infoItem.eventDate.toString()}
            />
            <Link to={`/explore/${infoItem.id}`}>View event </Link>
          </div>
        ))}
      </div> 
      : <p>Error</p>
    }
  </div>
);