react 路由 react-router-dom 的基本使用

react 路由

使用方法：

安装： yarn add react-router-dom

导入路由核心组件： import {BrowserRouter, Route, Link} from 'react-router-dom'

一个基本的路由案例：

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import App from './App'
import Page from './pages/demo_1'

export default function Router() {
    return (
        <BrowserRouter>
            <App>
                <Link to="/page" >点击调转到页面</Link>
                <Route path="/page" component={Page} />
            </App>
        </BrowserRouter>
    )
}

路由方式： BrowserRouter、HashRouter

Route基础用法：

1  <Route path='/admin/button' component={Button} />
2  <Route path='/admin/tabs' component={Table} />
 <Route path='/admin' render={() =>{
      <Admin>
         <Route path='/admin/home'component ={Home} />
      </Admin>
    }}
 />

Link 用法：主要用在a链接当中

<Link to='/admin'>admin</Link>
<Link to='/home'>home</Link>

　动态变量:

<Link  to={{pathname: '/pages/:number'}} >pages #7</Link>
// 取值：this.props.match.params.number
// to 可以传一个基本的location对象，pathname：'/123', search:'', hash: '', key: 'abc1234', state: {}

NavLink： 主要用在菜单导航当中

Switch:

由于React.Router 4.0 版本的路由可以匹配多个路由， 通过用Switch 包裹，可以在匹配到第一个结果后不向下执行匹配

<Switch>
  <Route path='/admin/Home' component={Home} />
  <Route path='/admin/list' component={List} />
  <Route path='/admin/login' component={Login} />
</Switch>

Redirect: 重定向：　　

<Redirect to='/admin/home' />

编程式导航：

通过JS代码来控制页面跳转

• this.props.history.push( '/home' ) 跳转到home页面
• this.props.history.go( -1 ) 返回到上一个页面

import React, { Component } from 'react'

export default class Start extends Component {
    toPath = () => this.props.history.push('/page')
    render() {
        return (
            <div>
                <button onClick={() => this.toPath()}>点击跳转!</button>
            </div>
        )
    }
}

匹配模式：

模糊匹配：

只要以pathname 开头的子路由都会匹配到，React路由默认是模糊匹配。

<Route path="/admin" component={Admin} />
<Route path="/admin/login" componnet={Login} />
// 此时即能匹配到Admin页面也能匹配到Login页面。

精确匹配：

在上面的模糊匹配中通常容易把多个页面揉合在一起展示出来。而精确匹配可以让路由更精准的匹配到某个路径上展示页面。方法是给 Route 添加 exact 属性，让其变为精确匹配模式。

 <Route  exact path="/" component={Page} />
 <Route exact path="/admin" component={Page8} />
 <Route exact path="/admin/login" component={Page8} />
// 此时只会展示某一个符合条件的页面，不会匹配到其他页面。只有路径完全符合才会展示。

路由规则

• Route 创建的标签，就是路由规则，其中path 表示要匹配的路由，component 表示要展示的组件

• 在vue中有个 router-view 的路由标签，专门用来放置，匹配到的路由组件，但是在 react-router中，并没有类似这样的标签，而是直接在Route标签当作占位的坑

• Route具有两种身份

  1. 它是路由匹配规则
  2. 它是占位符，表示将来要匹配到的组件都放到这个位置

• 如果要匹配参数，可以在匹配规则中，使用 : 修饰符 表示这个位置匹配到的是参数

  • 如果要从路由规则中，提取匹配到的路由参数，有两种方式

  • this.props.match.params.***

  • this.state.routeParams.***