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>
    );
  }