对于React Router的理解

2 年 ago

文, 翔

1 minute

React Router指的是一种用于React应用程序的路由管理库。

这个库用于路由React应用程序，该应用程序由多个页面组成。通过使用React Router，可以更简单地进行组件的渲染和URL参数的传递，以实现页面之间的导航。

使用React Router来进行路由设置，确定在访问URL时显示哪个组件。

用例

React Router可以用于SPA页面的跳转。通过使用React Router，可以在需要多个页面的应用程序中实现登录页面、用户注册页面等，当用户在应用程序内进行页面跳转时，可以只渲染所需的组件，而无需重新绘制屏幕。此外，还可以轻松获取和操作URL参数。

使用React Router时，通常情况下每次页面跳转都需要重新加载整个页面。然而，当使用React Router时，在页面跳转时，只需更新需要更新的部分，并且如果需要数据，可以使用fetch函数或axios库从服务器获取数据，并进行渲染。

使用React Router

首先，需安装react-router-dom包。

$ npm i react-router-dom -D
$ npm i @types/react-router-dom -D

以下是来自文件的内容。

// Configure nested routes with JSX
createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="contact" element={<Contact />} />
      <Route
        path="dashboard"
        element={<Dashboard />}
        loader={({ request }) =>
          fetch("/api/dashboard.json", {
            signal: request.signal,
          })
        }
      />
      <Route element={<AuthLayout />}>
        <Route
          path="login"
          element={<Login />}
          loader={redirectIfUser}
        />
        <Route path="logout" />
      </Route>
    </Route>
  )
);

} loader={({ request }) => fetch(“/api/dashboard.json”, {signal: request.signal})} />

<Route路径=”dashboard” 元素={} 加载器={({ request }) => fetch(“/api/dashboard.json”, {signal: request.signal})} />

路由指示该仪表板为/dashboard。加载器定义了在显示该路由之前异步获取数据的函数。使用fetch方法，异步获取外部资源。

} />可以写作} />

这是为了包装所有需要认证的路径。

} loader={redirectIfUser} />

路径为“login”，元素为，加载器为redirectIfUser。

最后，我们将第二行创建的路由传递给createBrowserRouter来创建路由器对象。