12.路由嵌套

一、摘要

1.需求

跟路由
首页 用户中心 商户
		个人中心 商户列表
		用户信息 增加商户

2.父路由里配置嵌套路由

import { Route, Link } from "react-router-dom";

<div className="pageCon">
    <div className="pageLeft">
        <Link to="/user/main">个人中心</Link>
        <Link to="/user/info">用户信息</Link>
    </div>
    <div className="pageRight">
        <Route exact path="/user/" component={Main} />
        <Route path="/user/main" component={Main} />
        <Route path="/user/info" component={Info} />
    </div>
</div>

二、简单的路由嵌套例子

1.根路由-App.js

import './assets/css/index.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
// 引入组件
import Home from './components/Home'
import User from './components/User'
import Shop from './components/Shop'

function App() {
    return (
        <Router>
            <div className="header">
                <Link to="/">首页</Link>
                <Link to="/user">用户中心</Link>
                <Link to="/shop">商户</Link>
            </div>
            <Route exact path="/" component={Home} />
            <Route path="/user" component={User} />
            <Route path="/shop" component={Shop} />
        </Router>
    );
}
export default App;

2.父路由-User.js

import React from 'react';
import { Route, Link } from "react-router-dom";
import Info from './User/Info';
import Main from './User/Main';

class User extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <div className='pagewrap'>
                <div className="pageCon">
                    <div className="pageLeft">
                        <Link to="/user/main">个人中心</Link>
                        <Link to="/user/info">用户信息</Link>
                    </div>
                    <div className="pageRight">
                        <Route exact path="/user/" component={Main} />
                        <Route path="/user/main" component={Main} />
                        <Route path="/user/info" component={Info} />
                    </div>
                </div>
            </div>
        )
    }
}

export default User;

3.子路由-info

@file(User/Info.js)

import React from 'react';
class Info extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        }
    }

    render(){
        return(
            <div>
                <h1>我是Info</h1>
            </div>
        )
    }
}

export default Info;

4.样式

*{padding:0;margin:0;box-sizing: border-box;}
html,body{width: 100%;height: 100%;}
fieldset, img { border:none; } 
img{display: block;} 
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; } 
ul,ol,li { list-style:none; } 
body {font-size :14px;font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}
a {color: #000;text-decoration:none ;display:inline-block}     
a:link{text-decoration:none ;color: #000;}   
a:hover{text-decoration:none ;cursor: pointer;margin-bottom: 0px;color: #000;}
a:active{color: #000;}
a:focus{outline: none;color: #000;}
textarea{resize: none;outline: none;padding: 5px;line-height: 20px;}
dl dt{font-weight: 500;}
label{font-weight: 500;margin: 0;}
input{padding:0 10px;font-size: 14px;}
button{font-size: 14px;}
table{font-size: 14px;}
.clearfix:after{content:"";display:block;height:0;clear:both;overflow:hidden;visibility:hidden}
.clearfix{zoom:1}
/* 常用样式 集合  */
.floatL, .fl{float: left;}
.floatR, .fr{float: right;}
.relative{position:relative}
.absolute{position: absolute;}
.boxsizing{box-sizing:border-box}
.txtellipsis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/*显示省略号*/

.pagewrap{

}
.header{
  display: flex;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  background: #000;
}
.header a{
  color: #fff;
  margin-right: 30px;
}
.pageCon{
  display: flex;
}
.pageLeft{
  width: 200px;
  height: 100vh;
  background: #f0f0f0;
}
.pageRight{
  flex: 1;
  background: #f5f5f5;
}
.pageLeft{
  padding-top: 30px;
}
.pageLeft a{
  display: block;
  width: 100%;
  line-height: 30px;
  padding-left: 15px;
}

三、模块化路由嵌套例子

1.摘要

将上述例子中的路由配套抽离出组件，

// 2.难点
在app.js中根路由传参
<Route key={key} exact={route.exact} path={route.path}
    render={props => (
        <route.component {...props} routes={route.routes} />
    )}
/>

// 3.例子中的路由解构
User - UserList,UserAdd

2.例子

1.route.js-配置所有的路由

import Home from '../components/Home';
import User from '../components/User';
import UserList from '../components/User/UserList';
import UserAdd from '../components/User/UserAdd';
import UserEdit from '../components/User/UserEdit';
import Shop from '../components/Shop';
import News from '../components/News';

let routes = [
    {
        path: '/',
        component: Home,
        exact: true
    },
    {
        path: '/user',
        component: User,
        routes: [
            {
                path: '/user/',
                component: UserList,
                exact: true
            },
            {
                path: '/user/list',
                component: UserList,
            },
            {
                path: '/user/add',
                component: UserAdd,
            },
            {
                path: '/user/edit',
                component: UserEdit,
            },
        ]
    },
    {
        path: '/shop',
        component: Shop,
    },
    {
        path: '/news',
        component: News,
    },
]
export default routes;

2.根路由-App.js（难点:跟路由传参）

import './assets/css/index.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import routes from './model/router';
function App() {
    return (
        <Router>
            <div className="header">
                <Link to="/">首页</Link>
                <Link to="/user">用户中心</Link>
                <Link to="/shop">商户</Link>
                <Link to="/news">新闻</Link>
            </div>
            {
                routes.map((route, key) => {
                    return (
                        <Route key={key} exact={route.exact} path={route.path}
                            render={props => (
                                <route.component {...props} routes={route.routes} />
                            )}
                        />
                    )
                })
            }
        </Router>
    );
}

export default App;

3.父路由-User.js

import React from 'react';
import { Route, Link } from "react-router-dom";

class User extends React.Component{
    constructor(props){
        super(props);
        this.state = {}
    }

    componentDidMount(){
        let routes = this.props.routes;
        this.setState({routes: routes});
    }

    render(){
        return(
            <div className='pagewrap'>
                <div className="pageCon">
                    <div className="pageLeft">
                        <Link to="/user/list">用户列表</Link>
                        <Link to="/user/add">用户增加</Link>
                        <Link to="/user/edit">用户修改</Link>
                    </div>
                    <div className="pageRight">
                        {
                            this.props.routes.map((route,key)=>{
                                return <Route key={key} exact={route.exact} path={route.path} component={route.component} />
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

export default User;

4.子路由

很简单，不赘述

@file(User/UserList)

import React from 'react';
class UserList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        }
    }

    render(){
        return(
            <div>
                <h1>我是UserList</h1>
            </div>
        )
    }
}

export default UserList;