v5 版本路由 --- 类组件

目录

路由安装

配置@符号

1、第一种写法：

2、第二种写法：

 跳路由及传参

---

路由安装

// 安装路由
npm i react-router-dom --save

// 导入路由管理组件,二选一
import { BrowserRouter,HashRouter } from 'react-router-dom'

// 根组件包裹 理由管理组件
<>
  <BrowserRouter>
      <App />
  </BrowserRouter>

配置@符号

// 安装包  npm i -D @craco/craco

// src文件外新建一个 craco.config.js
const path = require('path')
module.exports = {
 webpack: {
 alias: {
 '@': path.join(__dirname, 'src')
 }
 }
}

// 第三步,修改package.json中的脚本命令
script {
    'start':' craco start '
    'build': 'craco build '
    'test': ' craco test '
}

// 重启项目

1、第一种写法：

直接在App.tsx 组件中配置一级路由规则，二级路由规则在所对应的一级路由组件中配置

// 路由懒加载 
import React, { Component, lazy, Suspense } from 'react';

let Index = lazy(() => import('./view/Index/Index'))
let Login = lazy(() => import('./view/Login'))
let NotFound = lazy(() => import('./view/NotFound'))

// v5路由 使用 Route, 不过必须使用Switch包裹, 重定向 Redirect
<Suspense fallback={<div className='loading' >
    <Switch>
        <Route path='/index' component={Index} />
        <Route exact path='/login' component={Login} />
        <Redirect exact from='/' to='/index' />
        <Route path='*' component={NotFound} />
    </Switch>
</Suspense >


// 二级路由规则 和一级路由规则一样
<Suspense>
    <Switch>
        <Route path='/index/home' component={Home} />
        <Route exact path='/index/cate' component={Cate} />
        <Redirect exact from='/index' to='/index/home' />                        
        <Route path='*' component={NotFound} />
    </Switch>
</Suspense>

2、第二种写法：

第一步：配置路由表 routeConfig.ts

import React, { lazy } from 'react';

// 一级
let Index = lazy(() => import('../view/Index/Index'))
let Login = lazy(() => import('../view/Login'))

// 二级
let Home = lazy(() => import('../view/Index/Home'))

// 配置路由表
export default [
    {
        path: '/index',
        component: Index,
        children: [
            {
                path: '/index/home',
                component: Home,
            },
            {
                from: '/index',
                to: '/index/home'
            }
        ]
    },
    {
        path: '/login',
        component: Login,
    },   
    {
        from: '/',
        to: '/index'
    },
    {
        path: '*',
        component: NotFound,
    },
]

第二步：生成路由规则 RouterView.tsx

import React, { Component, Suspense } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';

// 导入路由配置表


// 当前组件既能生成一级路由规则,也能生成二级规则,
// 必须给当前组件传入一个需要渲染的路由配置表

class RouterView extends Component<any, any> {
    render() {
        return (
            <Suspense fallback={<div className='loading'><img src={''} alt="" /></div>}>
                <Switch>
                    {/* 动态生成路由规则 */}
                    {
                        this.props.routes.map((item: any, index: any) => {
                            return (
                                item.from ?
                                    <Redirect key={index} from={item.from} to={item.to} /> :
                                    <Route key={index} path={item.path} render={(props) => {
                                        if (item.children) {
        //如果当前路由下有嵌套路由,将嵌套路由的路由规则通过routes属性传到item.component这个组件中
        //为了防止路由匹配成功时渲染出来的组件丢失history,location,match, 需要将props展开通过属性的方式传入组件.
                                            return <item.component {...props} routes={item.children} />
                                        } else {
                                            return <item.component {...props} />
                                        }
                                    }} />
                            )
                        })
                    }
                </Switch>
            </Suspense>
        );
    }
}

export default RouterView;

第三步：在App.tsx 中和 index.tsx 中导入RouterView