React 路由（react-router-dom）

React路由是react实现单页面应用的一种方式

介绍 react 路由的一些常用插件

1.BrowserRouter 和 HashRouter
2.Link 和 NavLink
3.Route
4.Switch
5.Redirect

模式：
1.BrowserRouter history ( ES6 )
2.HashRouter hash
as ：用于起一个别名例如：（ HashRouter as Router ）

这两者的区别在于：BrowserRouter 路由url 地址不带 # 号，而 HashRouter 路由带 # 号，BrowserRouter 是根据 ES6 当中的新语法来构成的，会出现404报错，解决的办法就是让后端通过url全部重定向到根页面。

Link 和 NavLink

相同点：两者都可以实现跳转，页面渲染后都是渲染成 a 标签。
不同点：当有需求需要点击时添加状态，则选用 NavLink 因为点击时它身上默认会带有一条 active-class 的类。

Route

Route是一个路由组件，相当于一个路由坑，它是可以将组件以路由的方式渲染在页面上。
它身上有 path: 路由路径 render component exact：精准匹配等属性

Switch

Switch的作用是只匹配选中的一条路由规则。根路径最好放在最后。

Redirect

Redirect的作用是重定向，用于默认重定向到某个路由页面，从而避免相同页面出现多个路由路径。（首页，登陆页面等）

快速搭建一个 react 路由页面

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'

import Home from './views/Home'
import City from './views/City'
import Card from './views/Card'
import Login from './views/Login'
import fakeAuth from './fakeAuth'
import Xiangqin from './views/Xiangqin'

class App extends React.Component{
  render(){
    return(
      <Router>
          <Switch>
              <Route path="/login" component={ Login }></Route>
              <Route path="/city" component={ City }></Route>
              <Route path="/index" component={ Home }></Route>
              <Route path="/xiangqin/:id" component={ Xiangqin }></Route>
              <Route
                path="/card"
                render = {
                 (props) => {
                   if(fakeAuth.isAuthenticated){
                     return <Card />
                   }else{
                    return <Redirect to="/login"></Redirect>
                   }
                 }
                }
               ></Route>
              <Redirect to="/index/home"></Redirect>
              
          </Switch>
      </Router>
    )
  }
}
ReactDOM.render(<App />,document.getElementById('root'))

注意：
1. 路由组件必须被 Router 包裹；
2. 用上Switch 必须把根页面放在后面，或者加上exact 属性
3. path中的路径建议是全小写。
4. 一级路由和二级路由分开文件放（这里是跟 Vue 进行区分

最后编辑于：2019.12.24 14:41:52

React 路由 （react-router-dom）