react入门之旅8——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的路由，都会加载。

其他组件就不写了