实际企业开发中 React 路由的配置

实际企业开发中 React 路由的配置

1. 配置路由入口组件

import React，{Component} from"react";
import {BrowserRouter,Switch} from "react-router-dom";
import {renderRouters} from "react-router-config";
import RouteComponent from "../router/index";
// 配置路由入口组件
class PageOs extends Component {
constructor(props){
super(props);
   }
   render(){
		return (
			<BrowerRouter>
				<Switch>{renderRoutes(RouteComponent)}</Switch>
			</BrowerRouter>
		)
}
}
export default PageOs;

2. 路由文件的配置

文件目录：src>router>index.js

import DisplayComponent from "../Container/SearchBtn/DisplayComponent";
import AboutComponent from "../Container/About/AboutComponent";
import handleComponent from '../Container/handle/handleComponent';
import StuInfoComponent from '../Container/StuInfo/StuInfoComponent';
import BooksComponent from "../Container/BooksCar/BooksComponent";
import UserLoginComponent from "../common/user/userLogin/UserLogin";
import PlayComponent from "../Container/rangePlay/PlayComponent";
import HookExerciseComponent from "../Container/HookExercise/HookExercise";
/**
 * 路由配置
 * @type
 */
const RouteComponent = [
    {
        name: "首页",
        path: "/",
        exact: true,
        component: UserLoginComponent
    },
    {
        name: "操作",
        path: "/handle",
        component: handleComponent,
        routes: [
            {
                name: "搜索框",
                path: "/handle/search",
                component: DisplayComponent
            },
            {
                name: "关于我们",
                path: "/handle/about",
                component: AboutComponent
            },
            {
                name:"学生信息",
                path:"/handle/stuInfo",
                component:StuInfoComponent
            },
            {
                name:"购物车",
                path:"/handle/bookCar",
                component:BooksComponent
            },
            {
                name:"播放栏",
                path:"/handle/play",
                component:PlayComponent
            },
            {
                name:"Hook练习",
                path:"/handle/clickBtn",
                component: HookExerciseComponent
            }
        ]
    }
];
export default RouteComponent;

3. 路由的使用

文件目录： src>Container>handle>handleComponent.js

import React, {Component} from 'react';
import {renderRoutes} from 'react-router-config'
import {Icon, Layout, Menu, Breadcrumb} from "antd";

const {SubMenu} = Menu;
const {Content, Sider} = Layout;

class HandleComponent extends Component {
  search = ()=> {
    this.props.history.push({pathname: '/handle/search'})
  }

  aboutMe = () => {
    this.props.history.push({pathname: '/handle/about'})
  }
  stuInfo = () =>{
    this.props.history.push({pathname:'/handle/stuInfo'})
  }
  bookCar = ()=>{
    this.props.history.push({pathname:"/handle/bookCar"})
  }
  playRange = () => {
    this.props.history.push({pathname:"/handle/play"})
  }
  clickBtn = () =>{
    this.props.history.push({pathname:"/handle/clickBtn"})
  }
  render() {
    return (
      <section>
        <Layout>
          <Layout>
            <Sider width={200} style={{background: '#fff'}}>
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{height: '100%', borderRight: 0}}>
                <SubMenu
                  key="sub1"
                  title={<span><Icon type="user"/>subnav 1</span>}>
                  <Menu.Item key="1" onClick={() => this.search()}>搜索</Menu.Item>
                  <Menu.Item key="2" onClick={() => this.aboutMe()}>关于我们</Menu.Item>
                  <Menu.Item key="3" onClick={() => this.stuInfo()}>学生信息</Menu.Item>
                  <Menu.Item key="4" onClick={() => this.bookCar()}>购物车</Menu.Item>
                  <Menu.Item key="5" onClick={() => this.playRange()}>播放栏</Menu.Item>
                  <Menu.Item key="6" onClick={() => this.clickBtn()}>Hook练习</Menu.Item>
                </SubMenu>
              </Menu>
            </Sider>
            <Layout style={{padding: '0 24px 24px'}}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>{(this.props.history.location.pathname).replace(/(\/)(\w+)(\/)/g,"")}</Breadcrumb.Item>
              </Breadcrumb>
              <Content style={{background: '#fff', padding: 24, margin: 0, minHeight: 900,}}>
                {renderRoutes(this.props.route.routes)}
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </section>
    );
  }
}
export default HandleComponent;

想要了解更加详细的代码过程可以参照我的gitHub