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
,路由配置方式,参考文章:
本部分的测试代码,也基于上述文章,这里不再重复描述。这种路由配置方式,即使没有做任何的默认首页配置,也是可以做到不报错的。就是可能显示的是空白页面。
方案一,不设置path,设置index
其实就相当于:
或者:
方案二,设置多条route
设置多条路由,每条对应不同path
。其实这和首页不首页的也没有啥关系,就是普通的设置方法而已。只不过就是path
名称似曾相识。
或者:

方案三,设置复杂path
目前的最新react route@v6
里面,<Route>
的path
属性,既不能使用正则表达式,又不能使用数组。所以,暂时没有好的简写方式了,暂留。下面的代码,是个临时解决方案。
结束语
目的很明确,方案很多样。选择合适的方案,就可以了。苏南大叔的更多react
经验文章,请点击:


