（十四）React路由的使用及注意事项
一.基本使用:
npm i -S react-router-dom
1)明确好界面中的导航区、展示区
2)导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
3)展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
4)<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
使用link的进行组件的切换
在入口的位置，进行注册路由（也就是Vue路由的位置点）
举例子：
此案例只有一部分就是展示在首页的配置，左侧是你的导航栏位置，右侧是你的展示区位置，也就是需要展示你自己的组件的位置，路由的入口。但是不像vue的样子路由的入口是总代替的，React的是单独注册的路由组件，进行在展示区展示你自己的组件。所以后续会分出来进行一般组件和路由组件
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 原生html中，靠<a>跳转不同的页面 */}
{/* <a className="list-group-item" href="./about.html">About</a>
<a className="list-group-item active" href="./home.html">Home</a> */}
{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
<Link className="list-group-item" to="/about">About</Link>
<Link className="list-group-item" to="/home">Home</Link>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注册路由 */}
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
</div>
</div>
</div>
</div>
</div>
)
}
}
注意必须要包裹 BrowserRouter 或者 HashRouter
可以在index.js中进行操作
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
)
二.NavLink:
区别于Link：
<NavLink></NavLink> 进行导航栏的跳转 会默认添加className active ，可以修改activeClassName 这样就会在点击的时候自动添加相应的className
1) NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
2) 标签体内容是一个特殊的标签属性
3) 通过this.props.children可以获取标签体的内容
4) 在自己封装navlink的时候，可以在上面采用{...this.props}
三.封装NavLink：
在使用的时候可以把NavLink进行封装一下，然后使用组件的方式进行加载，这样更方便。
新建一个MyNavLink ，将标签属性全部放上去，
import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'
export default class MyNavLink extends Component {
render() {
// console.log(this.props);
return (
<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
)
}
}
使用：
import MyNavLink from './components/MyNavLink'
<MyNavLink to="/about">About</MyNavLink>
就是这么用 其余位置可以继续注册路由 方便你进行相应的展示
四.Switch组件
引入switch组件 进行包裹 就会出现只匹配一次
- 通常情况下，path和component是一一对应的关系。
- Switch可以提高路由匹配效率(单一匹配)。
举例子：引入之后使用
import {Route,Switch} from 'react-router-dom'
{/* 注册路由 */}
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Route path="/home" component={Test}/>
</Switch>
五.解决多级路径刷新页面样式丢失的问题
为什么是会出现这种的问题，就是你在全局引入boostrap的时候，使用的是绝对路径，然而你使用嵌套路由的时候，会修改你的url路径，然后就会默认给你的资源文件路径加上多级url导致获取不到相应的文件。解决方法：
1)public/index.html 中 引入样式时不写 ./ 写 / （常用）
2)public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3)使用HashRouter。
访问不到的时候就会进行返回index.html
六.路由的精准匹配和模糊匹配：
模糊匹配：你输入的路径和匹配的部分一致，而且匹配的顺序一致
精准匹配：在注册路由的时候 添加 exact={true} 这样路由必须一样
1）默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2）开启严格匹配：<Route exact={true} path="/about" component={About}/>
3）严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
七.路由的重定向：
redirect:
1)一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2)具体编码：
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
八.路由组件和一般组件的区别：
路由组件：一般放在pages ， 路由组件会收到相应的props 就是
一般组件：就放在components 一般组件不会收到props
1)写法不同：
一般组件：
路由组件：
2)存放位置不同：
一般组件：components
路由组件：pages
3)接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"