React-Router知识点

---

路由的分类

• 页面路由

window.location.href = 'http://www.baidu.com';
history.back();// 路由后退

• hash 路由

window.location = '#hash';
window.onhashchange = function(){
    console.log(window.location.hash)
}

• h5路由

history.pushState('name','title','/path');//  推进一个状态
history.replaceState('name','title','/path'); //  替换一个状态
window.onpopstate = function() {
    console.log(window.location.href); //  获取整个URL字符串
    console.log(window.location.pathname); //    URL 的路径部分(就是文件地址)
    console.log(window.location.hash); //   查询(参数)部分
    console.log(window.location.search); //  锚点hash值
}

---

react路由 react-router-dom

• 路由方式
  <BrowserRouter>h5路由 ，需要后端进行配置
  <HashRouter>hash路由，
• 路由规则
  <Route>，
  <Route path="/home" exact component={Home}></Route>
  ( exact ) 为纵向匹配 如果是嵌套路由则不可用
• 路由选项
  <Switch>，可以解决路由的多次匹配，为横向匹配
• 跳转导航
  <Link/>，路由的跳转类似a标签
  <NavLink>，在Link的基础上增加了一些选中状态，一般用作导航菜单
  <NavLink to='/home' activeClassName="selected"></NavLink>
  路由切换TAB选中样式 也可activeStyle={{color:'red'}} 直接添加样式
• 自动跳转
  <Redirect to='/' />路由重定向 一般配合Switch使用

---

路由参数的获取

<Link  to='/home/123'/> //  传递参数
<Route path="/home/:id" component={Home}></Route>//  定义参数名称
this.props.match.params.id  //  在Home组件中接受数据

多条路由匹配

<Link to="/a">不带参数，组件A</Link>
<Link to="/a/123">带参数，组件A</Link>
<Link to="/a/sub">组件A下的sub 组件</Link>
<Switch>
   <Route exact path={`${this,props.match.path}`} render ={(route) => {
        return <div>当前组件是不带参数的组件A</div>
    }}/> // exact为完全匹配，只会匹配  /a
   <Route path={`${this,props.match.path}/sub`} render ={(route) => {
        return <div>当前组件是组件A下的sub组件</div>
    }}/> // Switch会将第一个匹配到的路由返回，而不会继续向下匹配
   <Route path={`${this,props.match.path}/:id`} render ={(route) => {
        return <div>当前组件是带参数的组件A，参数是{route.match.params.id}</div>
    }}/>//  一般都是将通配路由放在最后面
</Switch>