React-router（2）路由嵌套

骑猪看日落 2022-05-30 04:08 216阅读 0赞

### 2、路由嵌套： ###

> 参考 2.routingNested.js
> 
> [DEMO地址][DEMO]

还是以[上一节][Link 1]上面那个 DEMO 为示例。

毫无疑问，我们肯定会面临路由嵌套的问题，即在顶级路由匹配到组件后，子组件里面也可能有一个次级路由。

假如顶级路由的url为：`/1`，那么次级路由匹配后的路径一般来说是 `/1/2`；

但是假如当前路径是 `/1`，然后次级路由里有这样一个标签 `<Link to="/2"}>示例2</Link>`。

当我们点击这个标签时，跳转的 url 是 `/2`，而不是我们期望的 `/1/2`。因此我们需要拿到之前的 url `/1`，具体方法就是通过路由的 match 属性来拿，于是就有了这种写法：

意思就是跳转到当前路径，后面再拼接 `/2`这个路径。

相对应的，我们在 Route 标签里也要添加相同的内容：

示例（子路由是 ChildRouter）：

import React from "react";
    import {
        HashRouter as Router,
        Route,
        Link
    } from 'react-router-dom'
    
    const First = () => <div>第一个示例的第【1】个路由，第一个路由在第一个和第二个url里都会显示，但不在第三个显示</div>
    const Second = () => <div>第一个示例的第【2】个路由，只在第二个url里显示</div>
    const ChildRouter = (route) => <div>第一个示例的第【3】个路由，只在第三个url里显示
        <Router>
            <div>
                <h3>以下是子路由的属性</h3>
                <p>{JSON.stringify(route)}</p>
                <li><Link to={`${route.match.url}/1`}>跳转子1</Link></li>
                <li><Link to={`${route.match.url}/2`}>跳转子2</Link></li>
                <hr/>
                {/* component 是一个React组件。
                  * 注意，组件是放在这个属性里，而不是 Route 包裹的里面
                  * */}
                <Route path={`${route.match.url}/1`} component={() => <h3>这里是子1</h3>}/>
                <Route path={`${route.match.url}/2`} component={() => <h3>这里是子2</h3>}/>
            </div>
        </Router>
    </div>
    
    class RoutingNested extends React.Component {
        render() {
            return <div>
                <h3>React-router 路由嵌套</h3>
                <h3>路由数据被存储在 this.props.match 里，这是其中的值{JSON.stringify(this.props.match)}</h3>
                <Router>
                    <div>
                        {/* this.props.match.url 表示当前url */}
                        <li><Link to={`${this.props.match.url}/1`}>示例1</Link></li>
                        <li><Link to={`${this.props.match.url}/2`}>示例2</Link></li>
                        <li><Link to={`${this.props.match.url}/3`}>示例3</Link></li>
                        <hr/>
    
                        <Route path={`${this.props.match.url}/1`} component={First}/>
                        <Route path={`${this.props.match.url}/2`} component={Second}/>
                        <Route path={`${this.props.match.url}/3`} component={ChildRouter}/>
                    </div>
                </Router>
            </div>
        }
    }

[DEMO]: https://github.com/qq20004604/react-demo/blob/master/react-router/src/2.routingNested.js
[Link 1]: http://blog.csdn.net/qq20004604/article/details/79440237