前言:最新版的react路由有些改变,大致总结如下
- 用
Routes
代替了原来的Switch
- 之前的
<Route />
组件的component
属性变成了element
- 引进了新的API:
<Outlet />
- 貌似自带精准匹配,无需再加
exact
属性了
先上dome:
根组件:
各子组建:
页面展示:
默认展示页面:
首页展示页面:
登陆展示页面:
首页的子页面:
未匹配到的页面:
*总结与注意点:
-
在涉及到嵌套路由时,一定要在其父组件的最后面用
Outlet
作为出口,不然无法正确匹配到其底下的子路由,比如在根组件(即<Default/>
)的后面添加<Outlet />
,才能匹配到<Home />
、<Login />
、<All />
组件,同理,要在<Home />
里面加<Outlet />
才能匹配到<HomeItem />
,不然效果就如下:官网的说法:
-
上述使用的是history模式,还有hash模式的,只要把上诉代码的
<Router></Router>
改成<HashRouter></HashRouter>
即可。 -
如果所有路由都匹配不到的话,只需要多加一条路由,其规则是
*
号即可,这样以后别人访问不到一些资源的时候,就可以跳到这里来当成404页面
对于路由传参,请点我