react路由的使用 react-router-dom 、二级路由的样式丢失问题、路由传参

路由实现原理

路由实现借助bom身上的history 实现的，点击路由链接实现地址栏改变，路由器监听到地址的变化将需要展示的路由组件展示出来

路由的俩种模式

1. BrowserRouter

2. HashRouter 路径后面会有一个#号，所有路由链接都会跟在#号后面（较好的兼容性）

路由组件和一般组件

• 路由组件一般放在pages文件夹下，一般组件放在conponents文件夹下

• 路由组件需要路由器匹配路径进行展示，一般组件需要手动书写展示

• 路由组件收到路由器的管理

路由的基本使用

1. 安装react-router-dom

2. 引入路由器，在app组件中根据需要引入路由器，将app组件交给路由器管理

3. 路由跳转链接为<link to=""></link>属性为需要跳转的链接

4. 如果路由导航有样式需要用到<nactiveLink></nactiveLink> 标签，该标签会给正在展示的路由导航添加默认的定义的类名active也可以用activeClassName属性进行更改所需类名

5. 当有很多的路由导航需要展示时样式时可以将<nactiveLink></nactiveLink> 进行二次封装，将不一样的属性通过props传递优化代码，

   • 标签体内容也可以通过props传递，默认会收集在props的 children属性上

6. switch 路由会向下匹配即匹配到路由后不会停