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 (        
            
                    

                        

                        {/* 路由链接 ，Link标签必须要在Router标签里面使用*/}
                        Home
                        
                        

                        About
                        
                        

                        Topics
                        
                    
                    {/* 动态渲染组建 */}
                    {/* 注册路由 */}
                    {/* Switch能够使路由在匹配到第一个的时候就停止接下来的匹配 */}
										
                    	
                    	
                    	
                      {/* 以上路由都未匹配上时，使用该选项 */}
                      
                                
            
        )
    }
}

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 (
            
        )
    }
}

使用示例

Home

模糊匹配

路由链接为

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 (
            

                
Topics
                
                    

                        

          							{/* 二级路由需要保留前一级路由的目录 */}
                        About
                        
                        

                        Topics
                        
                    
                    
                     
                     
            
            
        )
    }
}

向路由组件传递props参数

传递params参数

路由链接中写法

{msgObj.title}

注册路由中写法

接收方写法

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

传递search参数

路由链接中写法

{msgObj.title}

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

接收方写法

// 由于输入是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的值为对象
{msgObj.title}

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

接收方写法

//防止浏览器清了缓存以后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)