React路由的学习

React路由的学习

react-router主要是通过BOM中的history来实现的。

react-router分为三种

1. web
2. native
3. any

react-router-dom学习

react-router-dom是专门用于web的开发。

简单示例

注意这里的react-router-dom的版本为5.3.0，新版6以上将会出现问题

import React, { Component } from 'react'
import Home from './pages/Home'
import About from './pages/About'
import Topics from './pages/Topics'

import { BrowserRouter, Route, Link, NavLink, Switch, Redirect} from "react-router-dom";


export default class App extends Component {
    render() {
        return (        
            <BrowserRouter>
                    <ul>
                        <li>
                        {/* 路由链接 ，Link标签必须要在Router标签里面使用*/}
                        <Link to="/">Home</Link>
                        </li>
                        <li>
                        <Link to="/about">About</Link>
                        </li>
                        <li>
                        <Link to="/topics">Topics</Link>
                        </li>
                    </ul>
                    {/* 动态渲染组建 */}
                    {/* 注册路由 */}
                    {/* Switch能够使路由在匹配到第一个的时候就停止接下来的匹配 */}
										<Switch>
                    	<Route exact path="/" component={Home}/>
                    	<Route path="/about" component={About}/>
                    	<Route path="/topics" component={Topics}/>
                      {/* 以上路由都未匹配上时，使用该选项 */}
                      <Redirect to="/home" />
                    </Switch>            
            </BrowserRouter>
        )
    }
}

NavLink

NavLink可以实现路由链接的高粱，通过activeClassName指定样式名，默认为active。

封装自定义NavLink

标签体中的内容，react自动帮你封装进入props，而且其key为children。也可以通过给标签传key为children的内容来传输标签体

样式文件

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class MyNavLink extends Component {
    render() {
        return (
            <NavLink {...this.props}></NavLink>
        )
    }
}

使用示例

<MyNavLink to="/">Home</MyNavLink>

模糊匹配

路由链接为

<Link to="/about/a/b">About</Link>

注册路由为

<Route path="/about" component={About}/>

仍然能够进行匹配（从左往右，只要注册路由的内容存在就可以）

精准匹配

<Route exact={true} path="/about" component={About}/>

二级路由

import React, { Component } from 'react'
import { BrowserRouter, Route, Link, Redirect} from "react-router-dom";
import Message from './Message';
import News from './News';

export default class Topics extends Component {
    render() {
        return (
            <div>
                <h2>Topics</h2>
                <BrowserRouter>
                    <ul>
                        <li>
          							{/* 二级路由需要保留前一级路由的目录 */}
                        <Link to="/topics/news">About</Link>
                        </li>
                        <li>
                        <Link to="/topics/message">Topics</Link>
                        </li>
                    </ul>
                    <Route path="/topics/news" component={News}/>
                    <Route path="/topics/message" component={Message}/> 
                    <Redirect to="/topics/news"/> 
            </BrowserRouter>
            </div>
        )
    }
}

向路由组件传递props参数

传递params参数

路由链接中写法

<Link key={msgObj.id} to={`/topics/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}<br/></Link>

注册路由中写法

<Route path='/topics/detail/:id/:title' component={Detail}/>

接收方写法

const {id,title} = this.props.match.params

传递search参数

路由链接中写法

<Link key={msgObj.id} to={`/topics/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}<br/></Link>

注册路由中写法（不需要更改注册路由）

<Route path='/topics/detail' component={Detail}/>

接收方写法

// 由于输入是key=value&key=value的形式（urlencoded格式）
// qs.stringfy()对象转urlencoded
// qs.parse()urlencoded转对象
const {id,title} = qs.parse(this.props.location.search.slice(1))

传递state参数

传递信息在地址栏中隐藏

路由链接中写法

// 传递state参数时，Link中to的值为对象
<Link key={msgObj.id} to={{pathname:'/topics/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}<br/></Link>

注册路由中写法（不需要更改注册路由）

<Route path='/topics/detail' component={Detail}/>

接收方写法

//防止浏览器清了缓存以后state消失
const {id,title} = this.props.location.state || {}

路由的replace和push模式

在路由链接中添加replace={true}可以开启replace模式（默认是push模式）

编程式路由导航

借助this.props.history对象上的API对操作路由跳转、前进、后退

history:
  go: ƒ go(n)
  goBack: ƒ goBack()
  goForward: ƒ goForward()
  push: ƒ push(path, state)
  replace: ƒ replace(path, state)

使用路由链接时自动传入的props

history:
  go: ƒ go(n)
  goBack: ƒ goBack()
  goForward: ƒ goForward()
  push: ƒ push(path, state)
  replace: ƒ replace(path, state)
location:
  pathname: "/about"
  search: ""
  state: undefined
match:
  params: {}
  path: "/about"
  url: "/about"

withRouter

在一般组件的身上添加上history，location，match。

export default withRouter(Header)