1. Link，react-router-dom
  2. history
    1. push
    2. replace
  3. use
  4. location.href
  5. window.open
  6. 动态 a 标签
  1. <Link to={`/user/${item.id}`}>用户详情</Link>
  3. // to 不传参
  4. <Link replace to='/user/detail/'>信息</Link>
  6. // 标签式跳转 params传参
  7. <Link replace to='/user/23'>信息</Link>
  9. history.push("/user/detail")
  10. // state传参
  11. history.push("/user/detail",{id: 1,title:"信息1"})
  14. history.replace("/user/detail")
  15. // state传参
  16. history.replace("/user/detail",{id: 1,title:"信息1"})
  18. // 返回，后退 history.go(-1)
  19. history.goBack()
  20. // 前进 history.go(1)
  21. history.goForward()
  23. window.location.href = url;
  24. window.open(url)
  26. export function elementA(url: string) {
  27.   const $a = document.createElement('a');
  28.   $a.setAttribute('href', url);
  29.   $a.click();
  30. }

Link

用Link组件替代 a标签
Link组件是react路由中提供的声明式组件，可以区分路由的模式来实现路由的跳转

  1. <Link to={'/home'}>首页</Link>
  3. <Link to={`/profile/${user.id}`}>个人中心</Link>
  4. // 获取 id this.props.match.params.id

from to

二级导航就是在某个一级路由中继续嵌套路由
/user 一级路由
/user/list 二级路由

路由名字重复问题：
如果多次点击相同路由时会触发Hash history cannot PUSH the same path;的警告

  1. import UserList from './UserList'
  2. import UserAdd from './UserAdd'
  4. function App() {
  5.   return (
  6.     <div>
  7.       <ul className="nav nav-stacked">
  8.         <li><Link to='/user/list'>用户列表</Link></li>
  9.         <li><Link to='/user/add'>增加用户</Link></li>
  10.       </ul>
  11.       <Route path="/user/list" component={UserList}/>
  12.       <Route path="/user/add" component={UserAdd}/>
  13.     </div>
  14.   )
  15. }

MenuLink

替换掉原有的Link组件，并且在内部进行判断是否增加激活状态

  1. import React from 'react';
  2. import {Route,Link} from 'react-router-dom'
  4. export default ({to,label})=> {
  5.     return <Route children={(props)=>
  6.         <li className={props.match?'active':''}><Link to={to}>{label}</Link></li>
  7.     }/>
  8. }

children属性：无论路由是否匹配到，都会执行此函数
render只要在匹配到后才会执行