react动态二级/三级路由操作

Posted 2021-09-15 老张在线敲代码

一级路由就不写了，比较简单，下面是在一级页面mvvm中进行写入二级及三级路由页面

app.js中进行路由配置

 <Route exact path={"/mvvm"} component={Mvvm} />
 <Route exact path={`/mvvm/:page`} component={Mvvm} />
  <Route path={`/mvvm/:page/:id`} component={Mvvm} />

开始配置二级路由

import React, { Component } from 'react';
import Header from "../../components/Header"
import {observer,inject} from 'mobx-react';
import Vue from "./vue";
import Rreact from "./rreact";
import Ng from "./ng";
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
@withRouter
@inject('first')
@observer

class index extends Component {
  constructor(props){
    super(props)
    this.state={
      current: 1,
    }
  }
    ifPage(params) {
        switch (params.page) {
          case "vue":
            return <Vue page={params.page}>vue</Vue>;
          case "rreact":
            return <Rreact>react</Rreact>
          case "ng":
            return <Ng>ng</Ng>
          default:
            return <ul>
                <li><NavLink to="/mvvm/vue">vue</NavLink></li>
                <li><NavLink to="/mvvm/rreact">react</NavLink></li> 
                <li><NavLink to="/mvvm/ng">Ng</NavLink></li>
            </ul>
            
        }
      }
      handleTab(index) {
        this.setState({
        });
        console.log(index + "1214");
      }
    render() {
        console.log(this.props.first)
        console.log(this.props);
        const { match } = this.props;
        return (
            <div>
                <Header/>
                <div className="mv_head">
                    {this.ifPage(match.params)}
                </div>
                    </div>
            </div>
        );
    }
} 

export default index;

配置三级路由

在上面代码中创建了三个二级路由页面然后下面再二级vue页面中操作三级路由页面

import React, { Component } from 'react';
import Vues from "./vues"
import { withRouter,NavLink,Switch,Redirect,Route,Link} from 'react-router-dom';
class vue extends Component {
    ifPage(params) {
        switch (params.id) {
          case "vues":
            return <Vues id={params.id}>vue</Vues>;
        
          default:
            return <ul>
                <NavLink to="/mvvm/vue/vues">vue二级</NavLink>
            </ul>
        }
      }
    render() {
        return (
                <p>{this.ifPage(this.props.match.params)}
                </p>

        );
    }
}

export default withRouter(vue);

文档结构

mvvm一级路由
vue/rreact/ng二级路由
vues是vue的三级路由