Reactjs react 路由 v6 没有路由匹配的位置

呈现勘探组件的路由需要指定一个尾随通配符匹配器"*"，这样子路由也可以匹配.

Descendent <Routes>

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="create" element={<Creation user={account} />} />
  <Route
    path="/explore/*" // <-- add trailing wildcard matcher
    element={<勘探 />}
  />
  <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>

使现代化

那么，在一个新的页面中，而不是在我的组件下，是否仍然可以呈现？

对为此，我建议进行一次小的重构，将<Route path=':id' element={<Test />} />移动到主路由.使用布局管线渲染Outlet，嵌套索引管线(专用于勘探)和嵌套管线(专用于Test).从勘探中删除Routes代码.

例子:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="create" element={<Creation user={account} />} />
  <Route path="/explore">
    <Route index element={<勘探 />} />   // "/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>
);