多级路由配置 方案

多级路由配置

文档解构

  Views 
     Home
     Usent
        Text
          index.jsx
          text1.jsx
          text2.jsx
          text3.jsx
        Color
          index.jsx
          color1.jsx
          color2.jsx
        Back
          index.jsx
          back1.jsx
          back2.jsx

【注意:】

1. 配置多级路由时要有一定的隶属关系 （优化代码 ，利于维护）
2. 动态路由第一个默认路由必须加上 exact （不然会报错）
3. 三级路由 【有三级路由时 上一级的二级路由要加 exact 精准匹配 】

import React, { Component, Suspense, lazy } from 'react';
import { Route, Switch, } from 'react-router-dom';

const Home = React.lazy(() => import('./views/Home'));//首页
const Usent = React.lazy(() => import('./views/Usent'));


class App extends Component {

  render() {
    return (
      <React.Fragment>

        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/home' component={Home} />
            
            <Route exact path='/ucent' component={Ucent} />
            {/* 二级路由 */}
            <Route exact path={`/ucent/:page`} component={Ucent} />
            
            {/* 三级路由  【有三级路由时 上一级的二级路由要加 exact 精准匹配 】 */}
            <Route path={`/ucent/:page/:id`} component={Ucent} />
          
          </Switch>
        </Suspense>

      </React.Fragment>
    )
  }
}
export default App

在第三级路由的入口文件中写

如 在 Usent / Text / index 中
Usent / Color
Usent / Back

二级导航

react/first-react/src/views/Ucenter/index.jsx
import React, { Component } from 'react';

import Text from './View/Text';
import Color from './View/Color';
import Back from './View/Back';
import TextDetail from './text/detail.jsx';



class View extends Component {
    constructor(props){
        super(props);
    }

    ifPage(params){
        switch (params.page) {
          // 二级导航页面
            case 'text':
                // return <Jxtj id={params.id}/>
                // return params.id ? <TextDetail  id={params.id}/> : <Jxtj id={params.id}/>
                return <div>这是：Text的页面</div>
            case 'color':
                return <div>这是：Color的页面</div>
            case 'back':
                return <div>这是：Back的页面</div>
            default:
                return <div>这是：home 也是个人中心首页</div>
        }
    }
    render(){
        const { match } = this.props;
        return(
<React.Fragment>
    <div className="header">header组件</div>
    <div className="search">search组件</div>
    <div className="nav">nav组件</div>

    <div className="umain clearfix">
        <div className="u_info fl">左侧的组件</div>
        <div className="u_conter fr">
           {/*
               右侧内容（页面）
            /ucenter/  Ucent的页面
            /ucenter/text  Text 的页面 
            /ucenter/color Color 的页面
            /ucenter/back  Back 的页面
         
           */}
            {this.ifPage(match.params)}
        </div>
    </div>
    <div className="footer">footer组件</div>
</React.Fragment>
        )
    }

}
export default View;

三级导航

需要写在二级的 index.jsx 入口文件中

react/first-react/src/views/Ucenter/index.jsx
import React, { Component } from 'react';


import TextMesg from './message.jsx';
import TextDetail from './detail.jsx';



class View extends Component {
    constructor(props){
        super(props);
    }

    ifPage(params){
      // 三级路由的形参
        switch (params.page.id) {
          // 二级导航页面
             case 'text':
                return <Jxtj id={params.id}/>
                return params.id ? <TextDetail  id={params.id}/> : <Jxtj id={params.id}/>
                return <TextMesg>这是：Text1.jsx</TextMesg>
             case 'text':
               
                return <TextDetail>这是：Text2.jsx</TextDetail>
         
            default:
                return <div>这是：Text index.jsx</div>
        }
    }
    render(){
        const { match } = this.props;
        return(
<React.Fragment>
    <div className="header">header组件</div>
    <div className="search">search组件</div>
    <div className="nav">nav组件</div>

    <div className="umain clearfix">
        <div className="u_info fl">左侧的组件</div>
        <div className="u_conter fr">
           {/*
               右侧内容（页面）
            /ucenter/text  Text 的页面 
            /ucenter/text/1
            /ucenter/text/2
            /ucenter/text/3
            /ucenter/color/1
            /ucenter/color/2
            /ucenter/syzl/3
           */}
           {/*{this.ifPage()}*/} 
            {this.ifPage(match.params)}
        </div>
    </div>
    <div className="footer">footer组件</div>
</React.Fragment>
        )
    }

}
export default View;