安装

yarn add react-router-dom

基本路由

导入路由需要的组件

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

路由组件解释

Router         总路由

link           路由导航
----to         切换的链接

Route          路由
----path       对应链接
----component  对应组件

简单路由完整代码

import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
// 导入子组件
class App extends Component {
  render() {
    return (
      <div className="App" >    
        <Router>
          <div>  <Link to="/">首页</Link> | <Link to="/about">关于</Link> </div>
          <hr/>
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" component={About}></Route>
        </Router>  
      </div>
    );
  }
}
function Home(){
  return (<h1>我是首页</h1>);
}
function About(){
  return (<h1>我是关于</h1>);
}
export default App;

路由的参数

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>);
  }

match 是组件默认传递的参数， match.paras 组件路由参数对象

出来match对象 还有 history对象和location对象

子路由

我们这里用Navlink 讲解它比link 选中的时候多个一个 active 的class

导入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

Switch能让匹配的路由唯一

01 导入Switch

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

02 定义路由

<Switch>
  <Route path="/" exact component={Home}></Route>
  <Route path="/about" component={About}></Route>
  <Route path="/produce/:id" component={Produce}></Route>
  <Route path="/detail" component={Detail}></Route>
  <Route component={NoMatch}></Route>
</Switch>

定义404路由要写到最后

03 编写404路由

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

location 当前的地址
pathname 当了地址信息

重定向

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

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 是可以省略的

完整代码

import React, { Component } from 'react';
import Child from './components/Child'
import {BrowserRouter as Router,Route,Link,Switch,NavLink,Redirect} from 'react-router-dom'
// 导入子组件
class App extends Component {
  render() {
    return (
      <div className="App" >    
        <Router>          
          <div>  
            <NavLink to="/" exact>首页</NavLink> | 
            <NavLink to="/about">关于</NavLink> |
            <NavLink to="/produce/1">产品1</NavLink> | 
            <NavLink to="/produce/abc">产品abc</NavLink></div>|
            <NavLink to="/detail">详情</NavLink>
          <hr/>
          <Switch>
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/produce/:id" component={Produce}></Route>
          <Route path="/detail" component={Detail}></Route>
          <Route component={NoMatch}></Route>
          </Switch>
        </Router>  
      </div>
    );
  }
}
function Home(){
  return (<h1>我是首页</h1>);
}
function About({history}){
  return (<h1>我是关于 <button onClick={()=>{history.go(-1)}}>返回</button> <button onClick={()=>{history.push("/")}}>首页</button> </h1>);
}
function Produce({match}){
  return (<h1>我是产品:{match.params.id}</h1>);
}
function NoMatch({location}){
  return (<h1>页面没有找到{location.pathname}</h1>);
}
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>);
}
function Arg(){
  return (<h1>我是Arg      </h1>);
}
function Com(){
  return (<h1>我是com</h1>);
}
export default App;

组件的参数

function About({match,history,location}){
  console.log(match,history,location)
  return (<h1>我是about</h1>);
}

match 匹配的当前路由

isExact: true ,//是否精确匹配
params:{}// 当前路由的参数
path:{} //路由指定的path
url：{}// link 指定的链接地址

history当前路由信息

go() 历史记录跳转
goBack() 历史记录返回
goFoward() 前进
length  历史记录的长度
push()  跳转 有历史记录
replace() 跳转没有历史记录
location 地址信息
---hash #后面的参数
---pathname 当前路由的地址
---search 问号后面的参数

location 同history的location 当前地址信息

class 编程 js路由跳转

history.push('/login');