安装

npm i react-router-dom -S
导入路由需要的组件
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

组件解释

BrowserRouter as Router 浏览器路由
所有的路由内容都应该放在Router 里面

<Router>
    <NavLink></NavLink>
    <Switch>
        <Route />
    </Switch>
</Router>

HashRouter as Router 哈希路由
NavLink 带active 导航
to 导航地址
to="/"
exact 必须精确匹配
如果被选中默认会有个active class
Link 导航
Route 路由页面
path 对应地址
component={ } 对应的组件
exact 精确匹配
Switch 一次只显示一个路由

<Switch>
    <Route />
</Switch>

Redirect 路由跳转
from 从
to 跳转的地址
Prompt 退出提示
message 提示文字
WithRouter 让非路由组件具有 路由props

import { withRouter } from 'react-router-dom'
class  ToDo{}
export defaultWithRouter(ToDo)
//包装
constructor(props){
    props 有
    match,history,location
}

路由组件的props###

history

go
goBack() //返回
goForward()   //前进
push('/')  //路由跳转
replace //跳转不留历史记录

location //地址栏信息
pathname  //路径

match

params //路由参数
url  //配置的地址

路由的参数

01 定义指令 Link指令

<Link to="/produce/1">产品1</Link> | 
<Link to="/produce/abc">产品abc</Link></div>

02 定义路由

<Route path="/produce/:id" component={Produce}></Route>

03 定义组件-获取路由参数

  function Produce({match}){
      return (<h1>我是产品:{match.params.id}</h1>);
  }

子路由

导入Navlink
import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom'

01 定义指令 Link指令

<NavLink to="/detail">详情</NavLink>

02 定义主路由

<Route path="/detail" component={Detail}></Route>

03 编写主路由

function Detail({location,match}){
  return (
    <div>
      <div><NavLink to={match.url+'/arg'}>参数</NavLink> | 
      <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
      <hr/>
      <Route path={match.url+'/arg'} component={Arg}></Route>
      <Route path={match.url+'/com'} component={Com}></Route>
    </div>);
}

//match.url 获取当前匹配的主路由地址

04 编写子路由

function Arg(){
  return (<h1>我是Arg      </h1>);
}

function Com(){
  return (<h1>我是com</h1>);
}

路由404配置 与Switch

01 导入Switch
import {BrowserRouter as Router,Route,Link,Switch,NavLink,Redirect} from 'react-router-dom'n
02 定义路由

<Switch>
  <Route component={NoMatch}></Route>
</Switch>
//定义404路由要写到最后

03 编写404路由

function NoMatch({location}){
   return (<h1>页面没有找到{location.pathname}</h1>);
 }

重定向

我们需要写一个默认的子路由，这个时候可用重定向

01 导入重定向

import {
 BrowserRouter as Router,
 Route,
 Link,
 Switch,
 NavLink,
 Redirect
} from 'react-router-dom'

重新编写 主路由

function Detail({location,match}){
  return (<div>
      <div><NavLink to={match.url+'/arg'}>参数</NavLink> | 
        <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
      <hr/>
      <Switch>
      <Route path={match.url+'/arg'} component={Arg}></Route>
      <Route path={match.url+'/com'} component={Com}></Route>      
      <Redirect from={match.url} to={match.url+'/arg'}/>
      </Switch>
    </div>);
}

//from 是可以省略的