<>react Routing configuration of background management system ：
<> About demand ：
hypothesis ：dashboard The file holds the entire page , Divided into navigation , And sidebar , Middle content bar ; Navigation and side are required for each route , Put the relevant routing pages in the middle of the content column .
1, It is divided into two parts ,login Login page ,/ Go to dashboard,
What's the advantage of this , You don't need to jump to a page to judge whether you have logged in or not . Here is a unified judgment , If you don't log in , Others / The first page will jump to login in .
Once logged in, jump to dashboard Page , This page has a navigation bar , And sidebar , These two are common content , It can be used everywhere . The next part is the dynamic change .
<> one , file ：router.js Routing configuration
Judge , Once you log in, you are allowed to view all the pages , If you don't log in, call the login page
import React, { Component } from 'react' // Introducing the core import { // Introduce routing related configuration HashRouter,
// structure hash route , #/home #/login === ( Vue mode:hash ) // BrowserRouter,// structure
history route /home /login === ( Vue mode:history ) Redirect, // redirect Route, // Route pit
Switch// Fuzzy matching , Packing list and Switch Judgment sentence } from 'react-router-dom' //-------blog
Custom components ------------------------- import Login from '../views/login/Login'
//111, Login page import DashBoard from '../views/dashboard/DashBoard'//222, Set to /
Page of , The whole page structure is in this file , Take your name export default class Router extends Component { render()
{ return ( <HashRouter> // Hash routing <Switch> // Determine route , Match login page first , Match up brack get out <Route path=
"/login" component={Login}/> Route interception -- Three eyes
———— use render Arrow function form , Judge , Is there any token, Log in if you have , Can enter the background page , If not, call back to the login page <Route path="/" render={
()=> localStorage.getItem("token")?<DashBoard/>:<Redirect to="/login"/> } /> </
Switch> </HashRouter> ) } }
<>2, After the configuration is completed, the App.js Introduced in , Let him load the routing page
file ：App.js Configuration usage
import React from 'react'; // Introducing the core react import BlogRouter from './router'
// introduce router Routing profile // Root component class App extends React.Component{ render(){ return <
BlogRouter/> // direct return get out , become jsx File for page use } } export default App;
<>3, dashboard File is used to configure the whole page structure and routing ：（ Slash / page ）
notes ： In real work, you don't need to make your own judgment , We are only responsible for the circulation operation
// Introduce related routing and core import React, { Component } from 'react' import { Route, Redirect,
Switch} from 'react-router-dom' import Home from '../home/Home' import Users
from '../usermanage/Users' import SideMenu from './SideMenu' // Sidebar for components , use antd-UI build
import TopHeader from './TopHeader' // Component navigation bar , use antd-UI build import './index.css'
//antd Configuration of component library import { Layout } from 'antd'; import Create from
'../article-manage/Create' const { Content } = Layout; // deconstruction export default class
DashBoard extends Component { render() { let { roleType } = JSON.parse(
localStorage.getItem("token")) // take token Structure out return ( <Layout> {/* Custom sidemenu
*/} <SideMenu></SideMenu> // sidebar <Layout className="site-layout"> <TopHeader></
TopHeader> // Component navigation bar <Content // The following is the configuration of the component content area , className="site-layout-background"
style={{ margin: '24px 16px', padding: 24, minHeight: 'auto', }} > <Switch>
// Start related routing configuration {/* home route */} <Route path="/home" component={Home} /> {/*
User rights - User list */}
// This judgment is based on token Content of , Determine the user's permissions after login , If the login permission is greater than 3 If so, render the routing component , If less than , No rendering , This user does not have permission to look at the list {
roleType>= 3 ? <Route path="/user-manage/users" component={Users} /> : null } {
/* Authority management - Permission list , Role list */} { roleType >= 3 ? <Route path="/right-manage" component={
Manage} /> : null } {/* Article management - Article list Article classification */} <Route path="/article-manage/list"
component={List} /> <Route path="/article-manage/preview/:myid" component={
Preview} exact /> // Details page for dynamic components <Route path="/article-manage/create" component={
Create}/> <Redirect from="/" to="/home" exact /> // Redirect to home page <Route path="*"
component={NotFound} /> // None of the above matches , set up “ * ” After random input in the address bar will match 404 assembly </Switch> </
Content> </Layout> </Layout> ) } }
<> The second case of rendering routes ：（ The data returned from the back end is rendered directly ）
import React, { Component } from 'react' // Introducing the core import {Route,Redirect,Switch}
from 'react-router-dom'// Introduce routing import newList from '@/views/index' // Introducing back end data
import { Layout } from 'antd' //antd const { Content } = Layout;//antd export
default class Contents extends Component { // assembly constructor(props) { super(props
) this.state = { } } forList = (newList) =>{ // Define function , Receiving back end data //
console.log(newList) return newList.map((item) =>{ // loop if(item.children) {
// Judge if you have children , If there is, continue the cycle return item.children.map((item) =>{ // Circular data routing return <Route
exact key={item.id} path={item.path} component={item.component}></Route> }) }
else{// If you don't have children, you're going to cycle return <Route exact key={item.id} path={item.path} component=
{item.component}></Route> } }) } render () { return ( <Content className=
"site-layout-background" style={{ margin: '24px 16px', padding: 24, minHeight:
'100%', }} > <Switch>// Preserving fuzzy matching {this.forList(newList)}
// Call the function defined above , Passing back-end data over for rendering routing <Redirect from="/*" to="/home"></Redirect> // Route redirection <
/Switch> {/* Content */} </Content> ) } }
<> two , Sidebar configuration :（ Route jump ）
1, First configure fake data for sidebar loop ：（ Work is back-end return ）
list.js file ： const MyData = [ {// Parameters required for the first level menu title:" home page ", icon:UserOutlined,
permission:1, // Authority judgment path:'/home' // Benefits of setting ：1, Can be used to jump to a page ,2, It can be used to configure the default items of the drop-down menu }, {
title:" user management ", icon:VideoCameraOutlined, permission:3, path:'/user-manage',
children:[ // Configuration of secondary menu { title:" User list ", icon:UserDeleteOutlined , permission:3,
path:"/user-manage/users" } ] }, ] export default MyData // Throw it out
Configure sidebar ：
use antd-UI Frame layout sidebar
defaultSelectedKeys： The component library provides properties for setting menu highlights
defaultOpenKeys： Component library provides the default expansion effect of setting menu ,key It needs to be consistent with the data path returned by the back end
notes ： Classic when calling recursively
import React, { Component } from 'react' // introduce react core import MenuArr from
'../../router/list.js'// Introduce the false data defined above import { Layout, Menu } from 'antd'; import {
withRouter} from 'react-router'; // Introducing higher-order components import {connect} from 'react-redux'
// introduce react-redux const { Sider } = Layout; // deconstruction const { SubMenu } = Menu; class
SideMenu extends Component { // assembly state = { collapsed: false }
//1, Encapsulate rendering functions , Traverse sidebar renderMenu = (menus)=>{ //BBB let {roleType} = JSON.parse(
localStorage.getItem("token")) //2,roleType
Current login user's roleType( It's user rights , from token Take it out to judge , The higher the authority, the more you see return menus.map(item=>{
//3, Tips ： Determine the role value of the currently logged in user （roleType）, Compare with the character value required by the sidebar item to be rendered if(item.children &&
roleType>= item.permission){
//4, Judge whether there is a child parameter , Render the secondary title if you have one , And judge whether the login user's permission is greater than that of the header data , Larger than render , Hide if less than （ It's defined in the data permission）
return <SubMenu key={item.path} title={
// heavy ： Set the title for each rendering key（ It's defined in the data path="/home"） Used for programming, navigation and menu highlight <span> <item.icon/> <span>
{item.title}</span> </span> }> { // Recursive usage this.renderMenu(item.children)
// heavy ：7, There's more below children Continue recursive rendering ,（ You don't have to do loop rendering every time ） } </SubMenu> }else{ if( item.
permission> roleType){ //6, Determine whether the login permission is greater than that of the current header data , Greater than , Hide if less than . return null }
return ( //5, without children Child data , Just render the first level title directly ,menu <Menu.Item key={item.path} icon={<
item.icon />}> heavy ： Set the title for each rendering key（ It's defined in the data path="/home"） Used for programming, navigation and menu highlight {item.title} <
/Menu.Item> ) } }) } handleChangePage = (obj)=>{ //AAA // console.log(obj) //
Higher order components provide this.props.history.push(obj.key)//key Route corresponding path , When you click on each title , Strip to response routing }
render() { // console.log(this.props) // Get this path let selectedKey = this.props.
location.pathname // set up defaultSelectedKeys let openKey = "/"+this.props.location.
pathname.split("/")[1] // Intercepting the first level path of the second level route , set up defaultOpenKeys return ( <Sider trigger={
null} collapsible collapsed={this.props.isCollapsed}> {/* <div className="logo"
/> */} { /* andt Component library provides ：defaultSelectedKeys ： Who is highlighted ?// Structure out of programming trial navigation path come , Give this property
defaultOpenKeys：// Initial expanded SubMenu menu item key array
（ The premise is when rendering the title ,key To be deconstructed path Corresponding , Otherwise, initialization deployment will not work ） */ } <Menu theme="dark" mode="inline"
defaultSelectedKeys={[selectedKey]} defaultOpenKeys={[openKey]} onClick ={this.
handleChangePage} //AAA // click MenuItem Call this function , Will pass the specific value of the click in the past , It's the one that contains the data path > {
//BBBB this.renderMenu(MenuArr) // Call the function detached above , Render sidebar , The value passed is the false data introduced } </Menu> </Sider
> ) } } // connec Got it store, store.getState() const mapStateToProps = state => {
// console.log(state) return { name:"kerwin", a:1, isCollapsed:state.isCollapsed
} // Function return value , It's the future sideMeun Properties from components }// mapping redux state ==> Current component properties export default connect(
mapStateToProps)(withRouter(SideMenu))
Technology