反应路由器 v6 没有路由匹配位置

Question

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

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 路线中我有我的项目列表

我做了类似的事情（我遵循了 react-router 文档）


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 组件的路由需要指定尾随通配符匹配器 "*" 因此也可以匹配后代路由。

Descendent <Routes>

<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>

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

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

...

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

更新

So is there anyway to render in a new page and not under my component? So if I go to "/explore/event1" Test does not appear under the event list but in another new blank page?

是的。为此，我建议进行一个小的重构，将 <Route path=':id' element={<Test />} /> 移到主路由中。使用布局路由来呈现 Outlet 并嵌套专门用于 Explore 的索引路由和 Test 的嵌套路由。从 Explore.

中删除 Routes 代码

示例：

<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>
);

Answer 2

你试过这样声明你的路由吗？

<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=":exploreId" element={<Test />} />   // Wrap this route inside the explore route
        </Route>
        <Route path='dashboard' element={<Dashboard />} />
        <Route path='test' element={<Test />} />
      </Routes>
    </Wrapper>
  </div>
</BrowserRouter>

反应路由器 v6 没有路由匹配位置

react router v6 No routes matched location

reactjs

react-router

更新