React二级路由的实现

首先考虑二级路由在哪里展示，他们的展示在对应的一级路由的组件内，所以先找到一级路由对应的pages页
以登录和注册为例,在我们的里面实现二级路由（登录注册）
二级路由的展示有俩种形式：
①：通过一个开关切换俩个不同的组件

import React, { Component } from 'react'

import { Route } from 'react-router-dom'

import Login from '../login/Login'

import Register from '../register/Register'

import { NavLink } from 'react-router-dom'

export default class Mine extends Component {
    constructor(props) {
        super(props)

        this.state = {
            flag: true
        }
    }
    changeFlag = () => {
        this.setState({
            flag: !this.state.flag
        }, () => {//
            if (this.state.flag) {我们想要通过数据的改变来做一些事务处理，通常在this.setState里面的第二个参数（回调函数内写，）
                this.props.history.push('/mine/login')                
            } else {
                this.props.history.push('/mine/register')
            }
        })

    }
    render() {
        return (
       
            <div>
                <Route path='/mine/login' component={Login}></Route>
                <Route path='/mine/register' component={Register}></Route>
                <button onClick={this.changeFlag}>{!this.state.flag?'去登录':'去注册'}</button>
            </div>
        )
    }
}

②：通过导航，不同导航对应不同的组件
在一级路由对应的页面的组件内，写俩部分
一部分：导航区域，
另一部分：路由展示区域

import React, { Component } from 'react'

import { Route } from 'react-router-dom'

import Login from '../login/Login'

import Register from '../register/Register'

import {NavLink} from 'react-router-dom'

export default class Mine extends Component {
    render() {
        return (
            <div>  
                {/* 导航 */}
                <div>
                    <NavLink to='/mine/login'>登录</NavLink>
                    <NavLink to='/mine/register'>注册</NavLink>
                </div>
                <div>
                {/* 页面展示区域               */}
                    <Route path='/mine/login' component = {Login}></Route>
                    <Route path='/mine/register' component = {Register}></Route>
                </div>
            </div>
        )
    }
}

注意：路由的定义通过Route组件，跳转到指定路由Link和NavLink组件