React中如何将根路径'/'重定向至'/problem'？

要实现访问 localhost:3000/ 时自动跳转到 localhost:3000/problem，可以借助 React Router v6 提供的 Navigate 组件完成，具体操作如下：

• 从 react-router-dom 导入 Navigate 组件：

  import { Navigate } from 'react-router-dom';
  

• 修改根路由配置，将原有的 <Header /> 替换为 <Navigate> 组件，指定跳转目标路径：

  <Route path='/' element={<Navigate to="/problem" replace />}></Route>
  

  • to="/problem"：定义跳转的目标路径
  • replace：使用该属性会替换当前历史记录条目，用户点击浏览器返回按钮时不会回到根路径（不需要此行为可省略）

补充说明 #

若希望 Header 组件在 /problem 页面也能显示，可将 Header 作为布局路由的一部分，再把 /problem 路由设为其子路由，示例如下：

<Route path='/' element={<Header />}>
  <Route index element={<Navigate to="/problem" replace />} />
  <Route path="problem" element={<ProblemPage />} />
</Route>

这里的 index 属性表示当父路由（/）匹配且无匹配子路由路径时，渲染对应的 Navigate 组件完成跳转，同时 Header 会作为布局始终存在。

内容的提问来源于stack exchange，提问作者tHE