react-router-dom v5版本的简单使用

一、安装
npm install react-router-dom@5.2.1

二、在组件中使用

import React, { Component } from 'react'
import { BrowserRouter, Link, Route } from 'react-router-dom'
import Header from './component/Header/Header'
import List from './component/List/List'


export default class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <Link to="/" >Header</Link>
          <Link to="/list">List</Link>
          <Route exact path='/' component={Header}></Route>
          <Route path='/list' component={List}></Route>
        </BrowserRouter>
      </div >

    )
  }
}

BrowserRouter路由可以在index.js中引入直接包裹App根组件，在其他组件就不需要通过BrowserRouter来包裹了

关于Route的exact,加上exact代表当前路由path的路径采用精确匹配，比如说Header的path如果不加上exact,那么path=“/list"将会匹配他自己与path=”/“这两个，所以一般path=”/"这个路由一般会加上exact。