React嵌套路由、路由懒加载、编程式导航、withRouter、路由封装

嵌套路由

1、嵌套路由的地址必须在父路由的基础上编写，不可以独立编写

2、Route的定义位置，决定了嵌套组件内容渲染的位置

就是在子组件当中添加路由占位和路由连接部分

import React, { Component } from 'react'
import {Route,Link} from 'react-router-dom'​
import PENews from './PENews'
import HappyNews from './HappyNews'
import ChinaNews from './ChinaNews'
import InternationalNew from './InternationalNew'
export default class News extends Component {
    render() {
        return (
            <div>
                <div>
                    <Link to="/news/inews">国际新闻</Link >
                    <Link to="/news/cnews">国内新闻</Link >
                    <Link to="/news/hnews">娱乐新闻</Link >
                    <Link to="/news/pnews">体育新闻</Link >
                </div>
                <hr />
                    <Route path="/news/pnews" component={PENews}></Route>
                    <Route path="/news/hnews" component={HappyNews}></Route>
                    <Route path="/news/cnews" component={ChinaNews}></Route>
                    <Route path="/news/inews" component={InternationalNew}></Route>
            </div>
        )
    }
}

路由懒加载

react路由也存在懒加载的方式

react拥有懒加载的方法

react.lazy

懒加载还需要将Route部分使用react.Suspense来包裹

import React, { Component } from 'react'
import {Route,Link} from 'react-router-dom'
const PENews = React.lazy(()=>import('./PENews'))
const ChinaNews = React.lazy(()=>import('./ChinaNews'))
const InternationalNew = React.lazy(()=>import('./InternationalNew'))
​
const HappyNews = React.lazy(function(){
    return import('./HappyNews')
})
export default class News extends Component {
    render() {
        return (
            <div>
                <div>
                    <Link to="/news/inews">国际新闻</Link >
                    <Link to="/news/cnews">国内新闻</Link >
                    <Link to="/news/hnews">娱乐新闻</Link >
                    <Link to="/news/pnews">体育新闻</Link >
                </div>
                <hr />
                    <React.Suspense fallback="<h1>加载中.....</h1>">
                    <Route path="/news/pnews" component={PENews}></Route>
                    <Route path="/news/hnews" component={HappyNews}></Route>
                    <Route path="/news/cnews" component={ChinaNews}></Route>
                    <Route path="/news/inews" component={InternationalNew}></Route>
                    </React.Suspense>
            </div>
        )
    }
}

编程式导航

在js当中调用的导航方式

在react-router-dom当中，编程导航的方法在this.props.history

- push(): 实现页面跳转
  - 参数: 页面访问路径
- replace(): 实现页面跳转, 会覆盖最近一次的访问历史记录
  - 参数: 页面访问路径
- go(): 实现页面前进或者后退
  - 参数: 数值
    - 正数: 前进
    - 负数: 后退
- goBack(): 后退
- goForward(): 前进
<p onClick={()=>this.props.history.goBack()}>goBack</p>
<p onClick={()=>this.props.history.goForward()}>goForward</p>
<p onClick={()=>this.props.history.go(-2)}>go -2</p>
<p onClick={()=>this.props.history.push('/news/hnews')}>push(/news/hnews)<p>

withRouter

本质: 高阶组件

作用: 可以在非路由组件中注入路由对象

在没有路由指向(就是没有Route对象)的组件默认this.props当中没有路由所需要的参数，使用withRouter可以添加

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
class Test extends Component {
    render() {
        console.log(this.props,"+++++++++++++++++++++++++++++")
        return (
            <div>
                这是test组件
            </div>
        )
    }
}

export default withRouter(Test)

路由代码封装

封装一个路由格式

import {lazy} from 'react'
const Home = lazy(()=>import('../views/Home'))
const News = lazy(()=>import('../views/News'))
const routes = [
    {
        path: "/home",
        component: Home,
        exact: true
    },
    {
        path: "/news",
        component: News,
        exact: false
    },
    {
        path: "/hello",
        redirect: "news",
        exact: false
    },
    
]
export default routes

使用函数跳转封装结构

// <Switch>
// <Route path component>
// </Switch>
import {Suspense} from 'react'
import { Switch,Route,Redirect  } from "react-router-dom";
import roules from "./roules";
function RouterView(){
    return <Switch>
        <Suspense fallback="<h2>加载中</h2>">
        {
            roules.map((item,index)=>{
                if(item.component){
                    return <Route key={index} exact={item.exact} path={item.path} component={item.component}></Route>
                }//如果有item.component，证明是常规路由，否则可能是跳转
                else{
                    return <Route key={index} exact={item.exact} path={item.path}>
                        <Redirect to={item.redirect}></Redirect>
                    </Route>
                }
            })
        }
        </Suspense>
    </Switch>
}
export default RouterView

版本2通过给路由生成函数组件传参来提高灵活程度

函数组件需要通过形成来接受标签传递的内容

版本3

react路由没有守卫，所以路由守卫需要写道路由生成组件当中

// <Switch>
// <Route path component>
// </Switch>
import {Suspense} from 'react'
import { Switch,Route,Redirect  } from "react-router-dom";
function RouterView(props){
    var token = true
    var roules = props.roules
    return <Switch>
        <Suspense fallback="<h2>加载中</h2>">
        {
            roules.map((item,index)=>{

                if(!token && item.path !== "/index"){
                    return <Redirect key={index} to="/login"></Redirect>
                }
                if(item.component){
                    return <Route key={index} exact={item.exact} path={item.path} component={item.component}></Route>
                }//如果有item.component，证明是常规路由，否则可能是跳转
                else{
                    return <Route key={index} exact={item.exact} path={item.path}>
                        <Redirect to={item.redirect}></Redirect>
                    </Route>
                }
            })
        }
        </Suspense>
    </Switch>
}
export default RouterView

react拥有函数组件，函数组件可以作为函数调用，也可以作为标签调用