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
  配置的地址

子路由

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