react路由

安装

npm i react-router-dom -S

路由组件

BrowserRouter as Router 浏览器路由 别名 Router

所有的路由内容都应该放在Router里面

HashRouter as Router 哈希路由

NavLink 带active导航

• to 导航的地址

to="/"

• exact 必须精确匹配

• 如果被选中默认会有个active的class

Link 导航

• to 切换的页面

Router 路由页面

• path 对应的地址

• component={} 对应的组件

• exact 精确匹配

Switch 一次只显示一个路由

<Switch>
    <Route />
</Switch>

Redirect 路由跳转

• from 从

• to 跳转的地址

Prompt 退出提示

• message 提示文字

WithRouter

让非路由组件具有 ``路由Props`

import {WithRouter} from 'react-router-dom'

class ToDo{}

export default WithRouter(ToDo)
包装

constructor(props){
    props
    match.history.location
}

路由的参数

<NavLink to="/produce/123">

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

function Produce({match}){match.params.id}

路由组件的props

history

• go

• goBack() 返回

• goForward 前进

• push("/") 切换跳转

• replace 跳转不留历史记录

location 地址栏信息

• pathname路径

match

• params
  路由参数

• url
  配置的地址