每天学点React - 多级路由（嵌套路由）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

多级路由（嵌套路由）

在上一篇文章中我们学习了单级路由的使用方式，这一章我们需要实现一个多级路由，效果如下图所示，需要在路由页面中再嵌套子路由。

案例代码

---------- App.js ----------

该组件用来作为其它组件整合的一个根组件。

export default class App extends Component {
    render() {
        return (
            <div id='root'>
                <div>
                    <div className='row'>
                        <div className='col-xs-offset-2 col-xs-8'>
                            <Header></Header>
                        </div>
                    </div>
                    <div className='row'>
                        <div className='col-xs-2 col-xs-offset-2'>
                            <div className='list-group'>
                                {/* 自定义路径标签，可以便于统一样式 */}
                                <MyNavLink to='/a'>A</MyNavLink>
                                <MyNavLink to='/b'>B</MyNavLink>
                            </div>
                        </div>
                        <div className='col-xs-6'>
                            <div className='panel'>
                                <div className='panel-body'>
                                    <Switch>
                                        <Route path='/a' component={A}></Route>
                                        <Route path='/b' component={B}></Route>
                                        <Redirect to='/a'/>
                                    </Switch>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

---------- A.js ----------

展示区中 A组件 的展示内容。

export default class A extends Component {
    render() {
        return (
            <h3>A页面内容展示</h3>
        )
    }
}

---------- B.js ----------

展示区中 B组件 的展示内容，其中还引入了 C组件、D组件用来实现点击不同子路由跳转到不同页面的效果。这里需要注意的是，在路由组件中引入子路由的话，需要将本路由的path一并加上，否则会找不到子路由资源。

export default class B extends Component {
    render() {
        return (
            <div>
                <h3>B页面内容展示</h3>
                <div>
                    <ul className='nav nav-tabs'>
                        <li>
                            <MyNavLink to='/b/c'>C</MyNavLink>
                        </li>
                        <li>
                            <MyNavLink to='/b/d'>D</MyNavLink>
                        </li>
                    </ul>
                    <Switch>
                        <Route path='/b/c' component={C}></Route>
                        <Route path='/b/d' component={D}></Route>
                        <Redirect to='/b/c'></Redirect>
                    </Switch>
                </div>
            </div>
        )
    }
}

---------- C.js ----------

展示区中 C组件 的展示内容。

export default class C extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>c_1</li>
                    <li>c_2</li>
                    <li>c_3</li>
                </ul>
            </div>
        )
    }
}

---------- D.js ----------

展示区中 D组件 的展示内容。

export default class D extends Component {
  render() {
    return (
      <div>
        <ul>
            <li>
                <a href='/d1'>d_1</a>
            </li>
            <li>
                <a href='/d2'>d_2</a>
            </li>
            <li>
                <a href='/d3'>d_3</a>
            </li>
        </ul>
      </div>
    )
  }
}

小结

1. 注册子路由时要写上父路由的path值
2. 路由的匹配是按照注册路由的顺序进行的