七、【React-Router5】嵌套路由

1、实现效果

2、嵌套路由规则

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

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>
                            {/* News */}
                            <MyNavLink to="/home/news">News</MyNavLink>
                        </li>
                        <li>
                            {/* Message */}
                            <MyNavLink to="/home/message">Message</MyNavLink>
                        </li>
                    </ul>
                    <Switch>
                        <Route path='/home/news' component={News} />
                        <Route path='/home/message' component={Message} />
                    </Switch>
                </div>
            </div>
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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>
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3.3、Result

---

---

推荐参考学习视频：尚硅谷React教程-嵌套路由