react-router 入门笔记

React-router 笔记 官方文档

基本思路

• react-router 通过react 组件的方式实现,
• 路由相关的数据，通过props传递给组件调用,
• 路由层级关系， 通过标签嵌套实现

基础标签

• BrowserRouter ： 路由容器
  • 该组件只能包含单个元素
• Route : 组件渲染出口
  • 必须包含在 BrowserRouter 中
  • exact 精确匹配
• Link : 跳转链接
  • 必须包含在 BrowserRouter 中

基本使用

// react-router-demo
import React, { Component } from 'react'
import {
    BrowserRouter as  Router,
    Route,
    Link
} from 'react-router-dom'

// component
import Btn from'./btn'

// pages

function home(props){

    return (
        

            home
        
    )

}

function products(props){
    return (
        

            products
        
    )
}

function about(props){
    return(
        

            about
        
    )
}

function product(props){
   return (

    

        product
    

   )
}

// router-config

const routerConfig = [

    {
        label: 'home',
        path:'/',
        component: home,
        exact: true,

    },
    {
        label: 'products',
        path: '/products',
        component: products,
        exact: true,
    },
    {
        label: 'about',
        path: '/about',
        component: about
    },
    { 
        label: 'procut',
        path: '/products/:id',
        component: product
    }

]

// container

export default class pages extends Component{

    render(){

        const buildLabel = () =>{

            let tempalte = [];

            for(let item of routerConfig){
                tempalte.push(

                    
                        
                            {item.label}
                        
                    
                )
            }
            return tempalte
        }

        return (
            
                


                    

                    {buildLabel()}
                    

                    {
                        routerConfig.map((item) =>{
                            return (
                                
                            )
                        })
                    }

                

            
        )

    }

}

路由传参

• 配置参数路径： path = '/:params'
• 函数组件， 通过组件参数中的 match.params[paramName] 获取路由参数

// pages
function home(props){

    return (
        

            in home page
            

            router parmas: 
            

            { props.match.params.userId }
        
    )

}

render(){

    return (
        
            


                
                    to user page
                

                
                

            
        
    )

}

重定向 Redirect

通过返回组件 Redirect 实现重定向

 function subPage(props){

    return (
        
    )

 }

return (
    
        


            
                to sub page
            

            {/* 参数路由 */}
            

            {/* 重定向路由 */}
            

        
    
)

命令式导航(history)

• 命令式导航，通过history上的方法实现
• 为props 添加 history 参数, 在组件内部获取路由相关的参数，及控制路由动作

withRouter

• 对于 Route 绑定的组件，组要是页面，本身已经将 路由接口包裹在props中, 而其他组件想获取路由接口需要通过 withRouter(compoent) 处理.
• withRouter 处理的组件必须包裹在 标签中s, 也就是说, 子组件中路由参数等，来自于包裹的 Router 对象

// 使用 withRouter 处理组件，组件props中将包含 路由相关对象, { match, location, history }

// 定义组件
function jump (props){

    const { match, location, history } = props;
    console.log(props)

    return (

        


             back 
            {history.push('/home')} }> jump to home 
            { history.replace('/subPage') } }> replace path 

        

    )

}

// 在父组件中构件

  render(){

    return (
        
        


             history 

            

        
        
    )

}

• history 文档

跳转拦截 (Prompt)

• 使用Prompt, 可在路由跳转前，执行相关操作

//跳转提示, 每次路由跳转，提示信息 


//message 为函数
 (`跳转地址 ${location.pathname}`) } />

// 带触发条件 when = Boolean


// 

标签API

• history: 绑定history对象, 方便外部调用

• component: 渲染组件, 组件props将包含, { match, location, history } 路由参数
• render: 通过函数渲染组件, 通过渲染简单组件的方式, 及通过该方式，为子组件配置参数
• children: 构建自定义链接标签,
• path: 路由匹配地址
• exac: 是否精确匹配
• stric: 使用严格模式

• 多路径匹配时，只渲染就近配置路径下的组件

     /**
     * 路径为 '/' 只会渲染 home 组件
     */

    

        
        
        

    

路由参数

• match

  • params ：查询参数
  • isExac : 是否精确匹配
  • path : 包含 basename 路径
  • url: Link 地址

• location

  • key: 'ac3df4', // 标识符
  • pathname: '/somewhere' //路由地址
  • search: '?some=search-string',
  • hash: '#howdy',
  • state: { [userDefined]: true }

• history

  • length : 记录条数
  • action : 当前记录
  • location : location
  • push: 添加纪录，（跳转页面）
  • replace: 替换当前记录 (跳转页面)
  • go: 跳转到某条记录
  • goBack: 回退
  • goForward: 前进

路由嵌套

• 我们知道路由组件都包含在 中， 且该标签只能包含单一子元素，我们可以认为该标签创建一个路由环境, 包含在该标签内的 路由组件无论层级数，都归属于该路由环境.

 //父组件
 
    
        

                       
              

            
        
    
 

 //子组件


     to about 

    ( 
 in sub about 
 ) } />


/**
 * Sub中的路由组件 与App中的路由组件处于同一层级, 当点击 Link标签时， 将进入 About 而不是Sub的自定义组件
 */

• 创建属于当前页的子路由需要，需要创建新的 '' 标签, 在没有配置basename的情况下，子路由的路径将以上级路由路径为基础, 且优先匹配当前路由环境下的组件, 例如： 父组件路径: '/home' 子组件下有 , 实际路径为： '/home/sub' 所以在划分路径时， 需要注意路径嵌套的问题，如对根路径 '/' 的处理, 很可能出现，路由配置冲突。

//父路由

let AppRouter = [

  {
    label: 'home',
    path: '/',
    component: Home,
    exact: true
  },
  {
    label: 'user-center',
    path: 'user-center',
    component: UserCenter
  },
  {
    label: 'books',
    path: '/books',
    component: Books
  },
  {
    label: 'book',
    path: '/books:id',
    component: Books
  }

]

return (
      
        


            
                {routes}
            

        
      
    );

//子路由

  
   

        
路由
          to sub 

        ( 
 路由嵌套 path='/' 
 ) }>
        ( 
 路由嵌套 path='/sub' 
 ) }>
   


 /*
 ** 这是个路由冲突的例子, 可以看到，在父组件和子组件中，都配置了路径 '/books', 
 ** 当触发 Link 跳转时，将显示自组件内的组件， 即显示: '路由嵌套，path=/sub'
 ** 看起来一切正常，但当我们刷新页面， 将进入主路由的 Books 组件, 所以对于这样的路由冲突，编写时不易发现
 */

component, rander, children 的区别

• component 是应用最多的渲染接口，一般组件使用该接口就可以了， 该接口在渲染是将调用creatElement 构建组件
• rander 接受一个渲染函数， 构建时直接调用函数返回的模板， 不会调用creatElement, 这里是与component不同的地方， rander主要用在需要为组件传递一些 props参数时使用， 如果我们在component 中传入匿名函数包裹的组件， 该组件将被反复调用， 应该creatELement函数无法对匿名函数做比较。参考: React router的Route中component和render属性的使用
• children 无论路径是否匹配都将被渲染， 不同的是, 对于已匹配的路径，children 组件内将获取到 match 参数

自定义history

• 一般在浏览器使用的路由为 BrowserRouter，该路由是封装后的Router，提供了默认的history，所以该路由没有history 接口， 我们可以使用Router 自定特定类型的Router

import { Router} from 'react-router-dom'
import { createBrowserHistory } from 'history'

// 创建history
const history = createBrowserHistory()

// 包装原方法, 添加日志功能
const go = history.go
history.go = n => {
    console.log(`go to --> ${n}`)
    go(n)
}

// 监听路由变化, 重定向
history.listen(( location, action ) => {

    const isLogin = false
    if( isLogin ) {
        setTimeout(() => {
            history.push("/login")
        })
    }

})