react-RouterV6

程序员王天

发布于 2023-10-18 19:25:20

2550

发布于 2023-10-18 19:25:20

文章被收录于专栏：王天的进阶之路王天的进阶之路

# 内置 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;

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023年9月30日，如有侵权请联系 cloudcommunity@tencent.com 删除

react