跳至主要內容

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」,加我进王天唯一的读者群。

个人博客:https://itwangtian.com