react入门之旅8——Route之嵌套路由

最新推荐文章于 2026-06-22 09:52:53 发布

原创最新推荐文章于 2026-06-22 09:52:53 发布 · 203 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

react

当前文章被收录于：

react

28 篇文章 1 人学习

自学前端框架react的记录博客

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何在About组件中添加Messages和News子组件，并使用React Router实现路径精准匹配和路由跳转。通过实例展示了如何设置<Switch>和<Route>来确保正确显示内容。

示例

在About组件新增两个组件，一个是Messages一个是News。

项目层级

src

pages

About

Messages

index.jsx

index.css

News

index.jsx

index.css

index.jsx

index.css

Home

index.jsx

index.css

...

About

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

class About extends Component {
    render() {
        return (
            <div>
                <h3>Hello About</h3>
                <MyNavLink to="/about/news">News</MyNavLink>
                <MyNavLink to="/about/messages">Messages</MyNavLink>
                <Switch>
                    <Route path="/about/news" component={News}/>
                    <Route path="/about/messages" component={Messages}/>
                    <Redirect to="/about/news"/>
                </Switch>
            </div>
        );
    }
}

export default About;

其实，就是在上一篇博客中说的那样，虽然匹配有一定的规则，但我们可以简单理解为精准匹配，path是啥，to就是啥。

但还是得知道，是to去匹配path的，点击链接得到to，然后拿着to去匹配的path。所以是to包含path的路由，都会加载。

其他组件就不写了

标签

#测试工程师 #react