七、【React-Router5】嵌套路由

最新推荐文章于 2024-09-17 16:54:52 发布

纯纯的小白

最新推荐文章于 2024-09-17 16:54:52 发布

阅读量1.2k

点赞数

分类专栏： React 文章标签： react.js javascript 前端 react-router5 嵌套路由

本文链接：https://blog.csdn.net/qq_30769437/article/details/128098255

版权

React 专栏收录该内容

56 篇文章 2 订阅

订阅专栏

本文介绍了在React应用中如何实现嵌套路由，详细解析了Home组件、Message组件和News组件的代码，展示了如何使用`react-router-dom`的`Switch`和`Route`组件来创建和导航到子路由。同时，强调了注册子路由时需要包含父路由的path，并且路由匹配遵循注册顺序。

摘要由CSDN通过智能技术生成

1、实现效果

在这里插入图片描述

2、嵌套路由规则

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

3、修改上一节代码

点击访问上节代码；有点套娃，请耐心查看

3.1、项目结构变更如下

在这里插入图片描述

3.2、CODE

3.2.1、Home.jsx

import React, { Component } from 'react'
import { Route, Switch } from 'react-router-dom'
import MyNavLink from '../../components/MyNavLink'
import Message from './Messages'
import News from './News'

export default class Home extends Component {
    render() {
        return (
            <div>
                <h3>我是Home的内容</h3>
                <div>
                    <ul class="nav nav-tabs">
                        <li>
                            {/* <a class="list-group-item active" href="./home-news.html">News</a> */}
                            <MyNavLink to="/home/news">News</MyNavLink>
                        </li>
                        <li>
                            {/* <a class="list-group-item " href="./home-message.html">Message</a> */}
                            <MyNavLink to="/home/message">Message</MyNavLink>
                        </li>
                    </ul>
                    <Switch>
                        <Route path='/home/news' component={News} />
                        <Route path='/home/message' component={Message} />
                    </Switch>
                </div>
            </div>
        )
    }
}

3.2.2、Message.jsx

import React, { Component } from 'react'

export default class Message extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>
                        <a href="/message1">message001</a>&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="/message2">message002</a>&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="/message/3">message003</a>&nbsp;&nbsp;
                    </li>
                </ul>
            </div>
        )
    }
}

3.2.3、News.jsx

import React, { Component } from 'react'

export default class News extends Component {
    render() {
        return (
            <ul>
                <li>news001</li>
                <li>news002</li>
                <li>news003</li>
            </ul>
        )
    }
}