React - 嵌套路由的使用

一. 理解

1. 如果要使用嵌套路由, 那么外层的路由不能添加精准匹配（​​exact​​）。
2. 注册子路由时要写上父路由的path值。
3. 路由的匹配是按照注册路由的顺序进行的。

二. 嵌套路由案例

父路由：

import React, { Component } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import MyNavLink from "./components/MyNavLink";
import "./app.css";
export default class App extends Component {
  render() {
    return (
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <MyNavLink to="/home">Home</MyNavLink>
          <MyNavLink to="/about">About</MyNavLink>
        </div>
        <div className="col-xs-6">
          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/about" component={About} />
            <Redirect to="/home" />
          </Switch>
        </div>
      </div>
    );
  }
}

子路由（Home）：

import React, { Component } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import Tab1 from "./Tab1";
import Tab2 from "./Tab2";
import MyNavLink from "../../components/MyNavLink";
export default class Home extends Component {
  render() {
    return (
      <div>
        <h3>这里是Home页面</h3>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <MyNavLink to="/home/tab1">Tab1</MyNavLink>
            </li>
            <li>
              <MyNavLink to="/home/tab2">Tab2</MyNavLink>
            </li>
          </ul>
          <Switch>
            {/* 注册子路由时要写上父路由的path值,这里的父路由path值为 /home */}
            <Route path="/home/tab1" component={Tab1}></Route>
            <Route path="/home/tab2" component={Tab2}></Route>
            <Redirect to="/home/tab1" />
          </Switch>
        </div>
      </div>
    );
  }
}