React路由，RouterRoutesRoute配置，如何设置默认首页？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

react router实际上在尽量模拟一个正常的传统网页跳转，那么既然是网页跳转，就必然有默认首页的问题。本文以path属性和index属性为主要视角，解决react路由的默认首页问题。

苏南大叔的“程序如此灵动”，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

基础代码

BrowserRouter+Routes+Route，路由配置方式，参考文章：

• https://newsn.net/say/react-router-routes.html

本部分的测试代码，也基于上述文章，这里不再重复描述。这种路由配置方式，即使没有做任何的默认首页配置，也是可以做到不报错的。就是可能显示的是空白页面。

方案一，不设置path，设置index

<Routes>
  <Route index element={<P></P>} />
</Routes>

其实就相当于：

<Routes>
  <Route path='/' element={<P></P>} />
</Routes>

或者：

<Routes>
  <Route path='' element={<P></P>} />
</Routes>

方案二，设置多条route

设置多条路由，每条对应不同path。其实这和首页不首页的也没有啥关系，就是普通的设置方法而已。只不过就是path名称似曾相识。

<Routes>
  <Route path='/' element={<P></P>} />
  <Route path='/index' element={<P></P>} />
  <Route path='/default' element={<P></P>} />
  <Route path='/home' element={<P></P>} />
</Routes>

或者：

<Routes>
  <Route element={<P />}>
    <Route path="/" />
    <Route path="/index" />
    <Route path="/default" />
    <Route path="/home" />
  </Route>
</Routes>

方案三，设置复杂path

目前的最新react route@v6里面，<Route>的path属性，既不能使用正则表达式，又不能使用数组。所以，暂时没有好的简写方式了，暂留。下面的代码，是个临时解决方案。

<Routes>
  {["/", "/index", "/home", "/default"].map((p) => (
    <Route key={p} path={p} element={<P />} />
  ))}
  {/* <Route path="s" element={<S1></S1>}>其它路由</Route> */}
</Routes>

结束语

目的很明确，方案很多样。选择合适的方案，就可以了。苏南大叔的更多react经验文章，请点击：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。