19.react路由嵌套

react路由嵌套

Index.js

import React, {Component} from 'react';

import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Home from './Home';
import User from './User';
import '../../../../assets/css/index.css'
//路由嵌套
class Index extends Component {

    render() {
        return (

            <Router>
                <div>

                    <header className="title">

                        <Link to="/">首页组件</Link>

                        <Link to="/user">用户页面</Link>

                    </header>

                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route path="/user" component={User}/>
                    </Switch>
                </div>

            </Router>
        );
    }
}

export default Index;
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Info from "./User/Info";
import Main from "./User/Main";

class User extends Component {

    constructor(props) {
        super(props);
        this.state =
            {}
    }

    render() {
        return (
            <div className='content'>

                <div className='left'>
                    <Link to='/user/'>用户中心</Link>
                    <br/>
                    <br/>
                    <Link to='/user/main'>个人中心</Link>
                </div>

                <div className='right'>
                    <Switch>
                        <Route exact path={`${this.props.match.url}/`} component={Info}/>
                        <Route path={`${this.props.match.url}/main`} component={Main}/>
                    </Switch>
                </div>


            </div>
        )
    }
}

export default User;

User.js

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Info from "./Info";
import Main from "./Main";

class User extends Component {

    constructor(props) {
        super(props);
        this.state =
            {}
    }

    render() {
        return (
            <div className='content'>

                <div className='left'>
                    <Link to='/user/'>用户中心</Link>
                    <br/>
                    <br/>
                    <Link to='/user/main'>个人中心</Link>
                </div>

                <div className='right'>
                    <Switch>
                        <Route exact path={`${this.props.match.url}/`} component={Info}/>
                        <Route path={`${this.props.match.url}/main`} component={Main}/>
                    </Switch>
                </div>


            </div>
        )
    }
}

export default User;

Home.js

import React, {Component} from 'react';

class Home extends Component {

    constructor(props) {
        super(props);
        this.state =
            {}
    }

    render() {
        return (
            <div>

                <h1>Home组件</h1>
            </div>
        )
    }
}

export default Home;

Info.js

import React, {Component} from 'react';

class Info extends Component {

    constructor(props) {
        super(props);
        this.state =
            {}
    }

    render() {
        return (
            <div>

                <h1>用户信息</h1>
            </div>
        )
    }
}

export default Info;