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

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

react路由，RouterProvider的路由配置方式，如何设置默认首页？苏南大叔个人并不看好RouterProvider的设置方式，但是官方很推荐这种方式...本文的设置默认首页的方式，其实非常简单。一句话：index=true即可。如果您还想接着看本文的例子，请继续。

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

基础代码

RouterProvider和createBrowserRouter()，路由配置方式，参考文章：

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

本部分的测试代码，也基于上述文章，这里不再重复描述。

import {
  RouterProvider,
  createBrowserRouter,
} from "react-router-dom";

<RouterProvider router={router}></RouterProvider>

不配置首页信息

这种路由配置方式，如果没有任何的默认首页配置。可能页面部分区域会得到404的提示信息。

BrowserRouter + Routes + Route的组合中，并不会得到404的提示信息。

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

const router = createBrowserRouter([
  {
    index: true,
    element: <S1></S1>,
    // children: [],
  }
]);

设置index的时候，不能设置children。所以，苏南大叔个人认为这个官方的写法，不咋地，限制了后续的发挥。不推荐。

设置 path

这种设置path的方式，是可以设置children的。

效果其实就相当于：

const router = createBrowserRouter([
  {
    path:"",
    element: <S1></S1>,
    children: [],
  }
]);

或者：

const router = createBrowserRouter([
  {
    path:"/",
    element: <S1></S1>,
    children: [],
  }
]);

方案二，设置多条route

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

const router = createBrowserRouter([
  {
    path:"/",
    element: <S1></S1>,
    children: [],
  },
  {
    path:"/index",
    element: <S1></S1>,
    children: [],
  },
  {
    path:"/home",
    element: <S1></S1>,
    children: [],
  },
]);

结束语

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

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

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