react-RouterV6
小于 1 分钟
内置 Hooks
useRoutes
替代routes
组件,以 JavaScript 对象的结构生成routes
路由模版,省去了嵌套循环。
注意事项:
1、useRoutes 无法解析异步组件,可以考虑使用 React Router 的 React.lazy 和 React.Suspense 组合来实现。下面是一个示例:
import React, { Suspense } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const AsyncHome = React.lazy(() => import("./components/Home"));
const AsyncAbout = React.lazy(() => import("./components/About"));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route path="/" exact component={AsyncHome} />
<Route path="/about" component={AsyncAbout} />
</Switch>
</Suspense>
</Router>
);
}
export default App;
读者朋友好呀,我是王天~ 😊
如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇
如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏
微信:「wangtian3111」,加我进王天唯一的读者群。