反应路由器中的单个组件负载答案

【问题标题】：single component load in react router反应路由器中的单个组件负载
【发布时间】：2022-11-10 18:38:11
【问题描述】：

我需要知道如何避免在启动应用程序时加载所有组件。下面是我的 app.js 文件。在那里我使用了反应路由器。但它会在启动应用程序时加载所有组件。但要求是只有特定组件必须在该特定路线中加载。帮我解决这个问题。

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import TollList from "./Pages/TollList";

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/tolllist" element={<TollList />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

我为此尝试了反应路由器

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

React 创建一个单页应用程序。 Look at this example 的 React 路由器 V6。地址栏中显示的 URL 始终反映他们正在查看的内容。当您单击“关于”链接时，您可以看到 URL 更改为 www.websitename.com/About。空的“/”路由是您想要的默认路由。如果您单击 /tolllist 路由，则 Home 组件将不再显示，而是显示收费列表。

React Router Docs

【讨论】：