首先考虑二级路由在哪里展示,他们的展示在对应的一级路由的组件内,所以先找到一级路由对应的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组件