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