react 路由

安装

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

组件解释

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

HashRouter as Router 哈希路由
NavLink 带active 导航
to 导航地址
to="/"
exact 必须精确匹配
如果被选中默认会有个active class
Link 导航
Route 路由页面
path 对应地址
component={ } 对应的组件
exact 精确匹配
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指令

产品1 | 
产品abc

02 定义路由

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

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

子路由

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

01 定义指令 Link指令

详情

02 定义主路由

03 编写主路由

function Detail({location,match}){
  return (
    

      
参数 | 
      评论 | 
      

      
      
    
);
}

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

04 编写子路由

function Arg(){
  return (
我是Arg      
);
}

function Com(){
  return (
我是com
);
}

路由404配置 与Switch

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

  

//定义404路由要写到最后

03 编写404路由

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

重定向

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

01 导入重定向

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

重新编写 主路由

function Detail({location,match}){
  return (

      
参数 | 
        评论 | 
      

      
      
            
      
      
    
);
}

//from 是可以省略的