react路由最基本使用

引入依赖包

npm install react-router-dom react-router-config --save

• react-router是路由的核心库，包含Router组件等
• react-router-dom 当在浏览器中使用react-router时，引入该依赖。
  该依赖包是绑定了DOM的react-router，比react-router多出了<Link><BrowserRouter>等DOM类组件，因此引入了此包后就不用再引入react-router
• react-router-config 是 react-router的一个插件，能够实现集中式路由配置

各个组件含义

• <Router> 想要在页面中用路由导航到其他页面，需要在所有组件的最外层套上<BrowserRouter>或<HashRouter>作为容器
• <Route> 路由渲染，即展示跳转后的路由，他有许多属性
  • path="/" 页面的路径
  • render: () => (
    <Redirect to={"/recommend"}/>
    )
    path路径下渲染的内容
  • component=“Recommend” path路径下渲染的组件
  • exact: true 严格匹配，只有当路径刚好为"/“时才匹配。默认为false时，”/recommend"也会匹配"/"路径
    每个<Route>对应的路由组件默认会收到三个参数分别是history、location和match
• <Link> 路由跳转。其实就是实现了<a>标签，但是取消了a标签的默认跳转操作，只改变了url。<Link>中的to属性为跳转到的路径，相当于a标签中的href
• <NavLink> <Link>标签是没有高亮效果的，导航栏在不同页面想要有高亮效果activeClassName，需使用NavLink标签
• IndexRoute 设置一个默认页面

路由的模糊匹配

假如有<Link path='/home/a/b'>Home</Link>
对应的<Route path='/home' component={Home}>
<Link>中路由范围较为精确，<Route>中路由范围更宽泛，会导致模糊匹配，该<Route>会展示’/home/a/b’的内容。
默认情况下路由会模糊匹配，要想精准匹配想要跳转的链接，可加上‘exact’属性
<Route exact={true} path='/home' component={Home}>该<Route>只能渲染正好为’\home’的path

给路由组件传参

1. params
   <Link path={`/home/${myparams1}/${myparms2}`}>Home</Link> 携带参数
   <Route path=’/home/:myparams1/:myparams2’ component={Home}> 声明接收
   在Home组件中this.props.match.params可得到参数对象
2. search
   <Link path={`/home?myparams1=${myparams1}&myparams2=${myparms2}`}>Home</Link> 携带参数
   在Home组件中this.props.location.search形式为"?myparams1=1&myparams2=2"
   对于search的这种urlEncoded形式，引入querystring库对其解码得到参数对象
   import qs from querystring
qs.parse(this.props.location.search.slice(1))
3. state
   前两种参数传递方式都会在url中显式携带参数，state方式则不会
   <Link>中to是一个对象，参数放在state对象中，
   <Link to={{pathname:‘home’, state:{myparams1:myparams1, myparams2:myparams2}}}>Home</Link>
   在Home组件中this.props.location.state || {}取得参数对象

withRouter

withRouter可以让一般组件拥有路由组件特有API，如history、location等，返回值为一个新组件

import {withRouter} from 'react-router-dom'
class Header extends Component {
 ……
}
export default withRouter(Header)