为什么要用react-router？

当写了很多react组件后，想要实现不同组件之间的切换和跳转的时候，react-router就派上用场了。

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

核心思想

监听history库url变化事件(Router)
通过react context传播机制，将变化传给(route)做匹配渲染
route将最新match(含路径参数，不含query参数)和location通过context传给child

在React router中有三种类型的组件，一是路由组件第二种是路径匹配组件第三种是导航组件。

路由组件: BrowserRouter 和 HashRouter
路径匹配的组件: Route 和 Switch
导航组件: Link

安装

npm install react-router-dom

简单用法

import React from 'react'
import TodoList from './components/TodoList'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './App.css'

const App: React.FC = () => {
  return (
    <div className='App'>
      <Router>
        <Link to='/'>root</Link> <br />
        <Link to='/hello'>hello</Link> <br />
        <Link to='/todolist'>todolist</Link>
        <div>
          <Route path='/'  exact render={() => {
            return <div>root page</div>
          }} />
          <Route path='/hello' render={() => {
            return <div>hello world</div>
          }} />
          <Route path='/todolist' component={TodoList} />
        </div>
      </Router>
    </div>
  )
}

export default App

通过上面的代码我么就实现了我们项目的基本路由功能，Router组件决定了我们使用html5 history api，Route组件定义了路由的匹配规则和渲染内容，使用 Link 组件进行路由之间的导航。使用 exact 属性来定义路径是不是精确匹配。

使用url传参数

<Route path='/hello/:name' render={({match}) => {
            return <div>hello {match.params.name}</div>
  }} />

使用 <Route> 匹配的react 组件会在props 中包含一个match 的属性,通过match.params可以获取到参数对象

调用方法跳转

 <Route path='/hello/:name' render={({ match, history }) => {
          return <div>
            hello {match.params.name}
            <button onClick={()=>{
              history.push('/hello')
            }}>to hello</button>
            </div>
}} />

使用 <Route> 匹配的react 组件会在props 中包含一个history 的属性,history中的方法