十二 react 嵌套路由

// 这不仅仅是一个路由文件，它也是一个路由组件
// BrowserRouter是一个路由组件(自带history模式)，同时还有一个HashRouter(自带hash模式)
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import About from '../pages/about.js'
import Home from '../pages/home.js'
import User from '../pages/user.js'
import Apple from '../pages/apple'
import Blane from '../pages/blane'
const BaseRouter = () => {
    return (
        <BrowserRouter>
            {/* 每一个Route的外层需要一个Switch标签 */}
            {/* exact 精确匹配 */}
            <Switch>
                {/* 路由重定向  from当前访问的路径  to需要重新定向的路径*/}
                <Redirect from="/" to="/home" exact />
                <Route exact path='/user' component={User}></Route>
                {/* 嵌套路由位置在最底部否则无法切换其它同级路由 */}
                <Route exact to="/home" component={() => (
                    <Switch>
                        <Home>
                            {/* 嵌套路由 */}
                            <Switch>
                                <Redirect from="/home" to="/apple" exact />
                                <Route exact path='/about' component={About}></Route>
                                <Route exact path='/apple' component={Apple}></Route>
                                <Route exact path='/blane' component={Blane}></Route>
                            </Switch>
                        </Home>
                    </Switch>
                )}>
                </Route>

            </Switch>
        </BrowserRouter >
    )
}
export default BaseRouter

嵌套路由出口使用

this.props.children