React使用配置文件生成路由（类似于vue的路由配置）

废话不多说，直接上代码，后面会附上项目地址

 1、创建react工程，运行   npm install react-router-dom@5.2.0  --save                       

  2、在src里面新建router文件夹，文件夹目录如下

                          

 3、在router文件夹里面新建index.jsx

import React, { Component } from 'react';
import { Route, Switch, Redirect, HashRouter, withRouter } from "react-router-dom";

import Config from './config'

class Router extends Component {

  //递归生成路由文件
  generateRoute(ele) {
    if (ele.children) {
      if (ele.component) {
        return (
          <Route key={ele.name} path={ele.path} render={() => (
            <ele.component>
              {
                ele.children.map((item) => {
                  return this.generateRoute(item)
                })
              }
            </ele.component>
          )}>
          </Route>
        )
      } else {
        return (
          <Route key={ele.name} render={() => (
            ele.children.map((item) => {
              return this.generateRoute(item)
            })
          )}>
          </Route>
        )
  
      }
  
    }
  
    if (ele.redirect) {
      return <Route exact key={ele.name} path={ele.path} render={
        () => (
          <Redirect to={ele.redirect} />)}>
      </Route>
    } else {
      return <Route exact key={ele.name} path={ele.path} component={ele.component} />
    }
  
  }

  render() {
    return (
      <HashRouter>
        <Switch>
  
          {
            Config.map(item => {
              return this.generateRoute(item)
            })
          }

        </Switch>
      </HashRouter>
    );
  }
}

export default withRouter(Router);

 4、在router文件夹里面新建config.jsx

import Layout from '../views/layout/layout';

import A from '../views/pages/a';
import B from '../views/pages/b';
import Login from '../views/pages/login';

const router = [
  {
    path: '/',
    name: "Login",
    auto: false,
    component: Login,
  },{
    redirect: '/Layout',
    path: '/Layout',
    component: Layout,
    name: "Layout",
    auto: true,
    children: [
      {
        path: "/Layout/A",
        name: "介绍",
        auto: true,
        component: A,
      }, {
        path: "/Layout/B",
        name: "设计原则",
        auto: true,
        component: B,
      }
    ]
  }
]

export default router;

　　5、删除src文件夹里面的app.js、app.css文件，index.js文件修改如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import Router from "./router";
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

   

      6、路由嵌套时，上层需要组件需要{props.children}   如下：

import React, { PureComponent } from 'react'

class Layout extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {

    }
  }

  render() {
    return (
      <div>
        <div>
          <a href="/#/Layout/A">A页面</a>   
          <a href="/#/Layout/B">B页面</a>
        </div>
         
        
        {this.props.children} {/* 嵌套的子路由    */}
         
        <div><a href="/">返回</a></div>
      </div>
    )
  }
}

export default Layout

       

        7、在src里面新建views文件夹，然后新建几个页面，在config.js文件夹里面引入就可以了，我建的文件夹在项目在github里面

8、github地址  https://github.com/lzx-cloud/examples-h5/tree/main/react-router