React-router（2）路由嵌套

2、路由嵌套：

参考 2.routingNested.js

DEMO地址

还是以上一节上面那个 DEMO 为示例。

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

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

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

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

<li><Link to={`${this.props.match.url}/2`}>示例2</Link></li>

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

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

<Route path={`${this.props.match.url}/2`} component={second}/>

示例（子路由是 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>
    }
}