多级路由配置
文档解构
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
【注意:】
- 配置多级路由时要有一定的隶属关系 (优化代码 ,利于维护)
- 动态路由第一个默认路由必须加上 exact (不然会报错)
- 三级路由 【有三级路由时 上一级的二级路由要加 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;