一路由的基本使用：
1 明确好界面中的导航区，展示区
2 导航区的a标签改为link标签
<Link to="">Dome</link>
3 展示区中Router 标签进行路径的匹配。
<Router path='/xx' component=""><>
4 App最外侧报过一个<BrowserRouter><HashRouter>
link转为A标签。
路由组件和一般组件的区别？
一般组件的渲染：直接import引入后，</Home>，
路由组件渲染： 直接import之后，Route path弄好之后，直接component{}引入
pages：pages存放的是路由组件。
component：存放的是一般组件！！！Header组件。
1 写法不同：
一般组件：《Demo》
路由组件：《Route path=“/demo”component={Demo}》
2 存放位置不同：
一般组件：component
路由组件：pages
3 接受到的props不同：
一般组件：写组件标签传递了什么，就收到什么
路由组件：接受到3个。
history：go： goback：goForward： push： reaplace
location：{ hash：‘’ key：‘’，pathname：“”，search：“”，state：undefined}
match：params:{} path:"/about",url:"/about"
+高亮：：：
NavLink avtiveClassName ="demo"
NavLink avtiveClassName ="demo "
.demo {
backgrounde:orange !important;
}
封装 MyNavLink: <MyNavLink> </MyNavLink>
封装navlink：
class MyNavLink extends Component{
render() {
const {to,title,a,b,c,} = this.props
const {title} = this.props
return ( <NavLink avctiveClassName="atguigu" className="",{...this.props})
}
}
props标签属性值可以存储props，
body 标签体内容About，存储到了props。
{...this.props}
NavLink和封装NavLink？
1 NavLink可以实现路由链接的高亮。通过activeClassName指定的样式名。
2 标签体内容是一个特殊的标签属性，
3 通过this.props.children可以获得标签体内容
一个路径对应一个路由的展示，但是会/home,{home},/home,{Test}
路由会继续展示！！！
注册路由：<Switch>会只展示第一个组件。
Switch使用：
1通常情况下，path和component是一一对应的关系。
2 switch可以提高路由匹配的效率（单一匹配）
多级路径刷新页面，解决样式丢失的方法：：：
Lockhost3000，
index.html
3种解决办法：
1 public /index.html 引入时候 不写 ./ 写 /(常用）
2 public /index.html 引入 样式 不写./ 写 %PUBLIC_URL%(常用)
3 使用HashRouter
模糊匹配和精准匹配：：
1 默认开启的是模糊匹配，（【输入的路径】必须包含【匹配的路径】）如果不+exact就是模糊匹配
2 严格匹配：exact = {true};精准匹配： exact path="/about "
3 严格匹配不要随便开启，需要在开启，有时候会导致无法继续匹配二级路由。
Rediect
Redirect去那就去那，就是兜底的人，to ="/about/"