react基础学习之路由篇（react-router-dom）

react基础学习之路由篇（react-router-dom v5）

react-router-dom官方文档

建议把官方文档的例子好好研究一下，这个对帮助还是很大的

---

以下代码是以后台左侧导航栏为例子

---

路由配置文件 偏vue路由配置一点

// router/index.js

import Home from '../view/Home/Home';
import About from '../view/About/About'

import UserList from '../view/User/UserList';

const routes = [
    {
        path: '/home',
        name: 'Home',
        title: '首页',
        component: Home
    },
    {
        path: '/user',
        name: 'User',
        title: '用户管理',
        component: UserList,
        routes: [
            {
                path: '/user/list',
                name: 'UserList',
                title: '用户列表',
                component: UserList
            }
        ]
    },
    {
        path: '/about',
        name: 'About',
        title: '关于',
        component: About
    }
]

export default routes

---

路由文件以及路由嵌套

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Redirect, Route, Switch, useLocation } from 'react-router-dom'
import NavigationMenu from './NavigationMenu'; // 左侧导航UI组件
import routes from '../../router';
import Login from '../../view/Login'; // 登录组件
import './NavRouter.css'
let isAuthenticated = true

const NavRouter = () => {
    return (
        <Router>
            <Switch>
                <Route path="/login" component={Login} />
                <Route path="/" render={() => (
                    // 判断是否登录   注: / 的路径指向home组件
                    isAuthenticated ? <DashBoard /> : <Redirect to='/login' />  
                )} />
            </Switch>
        </Router>
    )
}

// 左侧导航栏
function DashBoard(){
    return (
        <div style={{ display: "flex" }}>
            <NavigationMenu />
            <div className="view_container">
                <div className="header_box"></div>
                <Switch>
                    {
                        routes.map((route, i) => (
                            <RouteWithSubRoutes key={i} {...route} />
                        ))
                    }
                </Switch>
            </div>
        </div>
    )
}

// 路由
function RouteWithSubRoutes(route) {
    let location = useLocation()
    
    useEffect(() => {
        console.log(route)
    }, [location, route])

    return (
        <Route
            path={route.path}
            render={props => (<route.component {...props} routes={route.routes} />)}
            />
    );
}

export default NavRouter

---

左侧导航UI组件以及菜单跳转

import React, { useState } from 'react';
import { Menu, Button } from 'antd';
import routes from '../../router';
import { useHistory } from 'react-router-dom';
import {
    // AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    // DesktopOutlined,
    // ContainerOutlined,
    MailOutlined,
  } from '@ant-design/icons';
import './NavRouter.css'
const { SubMenu } = Menu;

const NavigationMenu = () => {

    const [collapsed, setCollapsed] = useState(false)

    let history = useHistory()
    
    return (
        <div style={{ width: 200 }} className="menu_container">
            <Button type="primary" onClick={() => {setCollapsed(!collapsed)}}>
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
            </Button>
            {/* <div className="header_box"></div> */}
            <Menu
                defaultSelectedKeys={['1']}
                mode="inline"
                theme="dark"
                inlineCollapsed={collapsed}
                onClick={(item) => history.push(item.key)}
            >
                {
                    /**
                     * 三目运算
                     * 判断是否有子路由
                     */
                    routes.map(item => (
                        item.routes
                        ? <SubMenu key={item.path} icon={<MailOutlined />} title={item.title}>
                            {
                                item.routes.map(ele => <Menu.Item key={ele.path}>{ele.title}</Menu.Item>)
                            }
                        </SubMenu>
                        : <Menu.Item key={item.path} icon={<PieChartOutlined />}>{item.title}</Menu.Item>
                    ))
                }
            </Menu>
        </div>
    )
}

export default NavigationMenu

---

• < Switch > 是唯一的因为它仅仅只会渲染一个路径。
• 路由嵌套感觉像是套娃
• 路由跳转使用钩子函数useLocation