react-router-dom 【4和5版本】【巢狀路由】【4.0|5.0|6.0官方文件】
阿新 • • 發佈:2021-12-22
前言
react-router-dom4和5版本是一致的,在6.0版本以後會有較大的改動
巢狀路由
路由入口
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 defaultfunction (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> ); }