react-router-dom 【4和5版本】【嵌套路由】【4.0|5.0|6.0官方文檔】

前言

　　react-router-dom4和5版本是一致的，在6.0版本以后會有較大的改動

　　4和5版本官方文檔

　　6版本官方文檔

嵌套路由

　　路由入口

import { BrowserRouter, Route, Switch } from "react-router-dom";
import { createRoute } from "./createRoute";
import { routes } from "./routers";
import App from "@/App";
import Account from "@page/account/index";

export default function (props: any) {
  return (
    <BrowserRouter>
      <Switch>
       // {/* v4和v5版本 不允許在Route中嵌套Route，所以我們只能在父級路由的component <App>內部 放置子<Route/>*/}
　　　　//到了v6版本的時候，又和v3版本一樣，可以在<Route/>嵌套<Route/>
        <Route
          component={(props: any) => (
            <App {...props}> //父級路由<App></App>
              <Route path={"/account"} component={Account} /> //子路由
            </App>
          )}
        ></Route>
      </Switch>
    </BrowserRouter>
  );
}

　　父級路由所使用組件<App>

 render() {
    return (
      <div>
          //子路由會作為App的props.children 屬性
          <div className="main">{this.props.children}</div>
        </div>
      </div>
    );
  }