从零开始学习ReactJS – 03 – 路由嵌套必须的学啊!
路由嵌套配置
路由嵌套是非常常用的配置,例如管理后台中,对于很多内容页面都是在同一个框架下,一般都是首页包含了头部、侧导航、底部信息等内容,然后在首页中间进行嵌套功能页面,这样达到了复用与开发上的便利
开始配置
上代码 改造了 src/router/index.js
import React from 'react'
import Loadable from 'react-loadable'
import {BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import NotFound from '../pages/NotFound/NotFound'
function Loading(){
return <div>Loading</div>
}
const Home = Loadable({
loading: Loading,
loader: () => import('../pages/Home/Home')
})
const Login = Loadable({
loading: Loading,
loader: () => import('../pages/Login/Login')
})
const Board = Loadable({
loading: Loading,
loader: () => import('../pages/Board/Board')
})
class IRouter extends React.Component{
render(){
return (
<Router>
<Switch>
<Route path="/login" component={Login} />
//注意这里是重点哦 首页组件与嵌套
<Route path="/" component={(props) => {
return <Home>
//被嵌套的页面
<Route path="/board" exact component={Board} />
</Home>
}} />
{/* 404页面 */}
<Route path="*" component={NotFound} />
</Switch>
<li><Link to="/">Home</Link></li>
<li><Link to="/login" >Login</Link></li>
</Router>
)
}
}
export default IRouter
通过箭头函数来进行加载嵌套页面 重点在于在首页component={() => {...}}
这样通过箭头函数来加载
改造首页代码 src/pages/Home/Home.js
import React from 'react'
class Home extends React.Component{
constructor(props){
super(props);
this.state = {}
}
render(){
return (
<div>
This is Home Layout
{/* 这里是嵌套页面 */}
{this.props.children}
</div>
)
}
}
export default Home;
这里涉及到了this.props.children
的知识在第一节推荐的文档上有说明!
查看效果
当前目录结构
结尾
嵌套路由就实现了 接下来进行学习路由配置的优化提取 这样都放在一起太乱了