[JavaScript知识库]react简单入门-react-router6.0及以上路由(含嵌套路由)的的简单实用

前言：最新版的react路由有些改变，大致总结如下

1. 用Routes代替了原来的Switch
2. 之前的<Route />组件的component属性变成了element
3. 引进了新的API:<Outlet />
4. 貌似自带精准匹配，无需再加exact属性了

先上dome：
根组件：

各子组建：

页面展示：
默认展示页面：

首页展示页面：

登陆展示页面：

首页的子页面：

未匹配到的页面：

*总结与注意点：

1. 在涉及到嵌套路由时，一定要在其父组件的最后面用Outlet作为出口，不然无法正确匹配到其底下的子路由，比如在根组件(即<Default/>)的后面添加<Outlet />，才能匹配到<Home />、<Login />、<All />组件，同理，要在<Home />里面加<Outlet />才能匹配到<HomeItem />，不然效果就如下：官网的说法：

2. 上述使用的是history模式，还有hash模式的，只要把上诉代码的<Router></Router>改成<HashRouter></HashRouter>即可。

3. 如果所有路由都匹配不到的话，只需要多加一条路由，其规则是*号即可，这样以后别人访问不到一些资源的时候，就可以跳到这里来当成404页面

4. 官网

对于路由传参，请点我