<>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