首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >是否有一种方法可以使用React路由器v6设置默认路由?

是否有一种方法可以使用React路由器v6设置默认路由?
EN

Stack Overflow用户
提问于 2021-12-21 15:34:52
回答 2查看 20.5K关注 0票数 39

我只是找不到一种方法来设置一个默认的路由与反应路由器v6。

是不是因为它已经不是很好的编程了?

谁能告诉我原因吗?

提前感谢

拉斐尔

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-12-21 16:33:35

如果我正确地理解了您关于“默认”路径的问题,那么我将其解释为以下之一:

  1. 使用index路由:

您可以在布局路由中包装一组路由并指定一个index route

代码语言:javascript
复制
<Routes>
  <Route path="/*">
    <Route index element={<ComponentA />} />
    <Route path="pathB" element={<ComponentB />} />
    <Route path="pathC" element={<ComponentC />} />
  </Route>
</Routes>

索引路由是当路径与根父路由的路径完全匹配时将匹配和呈现的路由。

如果没有其他路由匹配,则

  1. 重定向到“默认”路由:

您还可以呈现一个重定向到您认为是“默认”路由的路由。

代码语言:javascript
复制
<Routes>
  <Route path="/pathA" element={<ComponentA />} />
  <Route path="/pathB" element={<ComponentB />} />
  <Route path="/pathC" element={<ComponentC />} />
  <Route path="*" element={<Navigate to="/pathA" replace />} />
</Routes>
票数 60
EN

Stack Overflow用户

发布于 2022-11-11 21:27:46

我实际上在这里找到了答案,但我只想分享我的解决方案,如果它能帮助到他们的人。

您可以将path='*'设置为创建默认路由。索引路由处理父路由("/"),但不处理本应返回404状态的路由。

代码语言:javascript
复制
if (!token) {
    // This router will handle my public routes. Anything else is going to redirect to AuthPage without losing the previous route typed.
    return (
      <BrowserRouter>
        <Routes>
          {/* Auth  */}
          <Route path="/">
            <Route exact path="recover" element={<UnknownPage />} />
            // Default route
            <Route path="*" element={<AuthPage setToken={setToken} />} />
          </Route>
        </Routes>
      </BrowserRouter>
    );
  }

  // This router is inside my application. Only logged users will get here.
  return (
    <BrowserRouter>
      <Routes>
        {/* My base page is just some fixed structure like Header, Sidebar and Footer. For this problem you can ignore it. */}
        {/* BasePage  */}
        <Route path="/*" element={<BasePage logout={logout} />}>
          {/* This is my specific users route */ }
          {/* Users */}
          <Route path="users">
            <Route path="" element={<UsersPage />} />
            <Route path=":id" element={<UserInfoPage />} />
          </Route>

          {/* Anything else is going to show this page. Even random words like:  http:localhost:3000/anything-asdvasd */}
          {/* Default Route */}
          <Route path="*" element={<UnknownPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );

使用父路由,就像我在users路由中使用的那样,可以更容易地调整默认路由的范围。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70437952

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档