React Router Dom 路由：你的应用代码的可靠指导

前端

2023-09-15 14:54:58

React Router DOM 路由简介

React Router DOM 是一个用于构建 React 单页面应用程序 (SPA) 的路由库。它允许您在应用程序中定义路由，并根据 URL 更改动态地渲染不同的组件。

路由的理解

路由是一个映射关系，它将 URL 映射到一个组件。当用户点击页面中的一个链接时，路由器会匹配 URL 并渲染相应的组件。

优点

整个应用只有一个完整的页面，多组件
点击页面中的链接不会刷新页面，只会页面局部刷新
数据通过Ajax请求，在页面异步展示

React Router DOM 的工作原理

React Router DOM 使用 URL 来确定要渲染哪个组件。当用户在浏览器中输入一个 URL 时，React Router DOM 会匹配该 URL 并渲染相应的组件。

如何使用 React Router DOM

要使用 React Router DOM，您需要首先安装它。您可以使用以下命令安装它：

npm install react-router-dom

安装完成后，您可以在您的应用程序中导入 React Router DOM。

import { BrowserRouter, Route, Switch } from "react-router-dom";

接下来，您需要创建一个路由表。路由表是一个包含路由的数组。每个路由都有一个路径和一个要渲染的组件。

const routes = [
  {
    path: "/",
    component: Home
  },
  {
    path: "/about",
    component: About
  },
  {
    path: "/contact",
    component: Contact
  }
];

最后，您需要将路由表传递给 BrowserRouter 组件。

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        {routes.map((route) => (
          <Route key={route.path} path={route.path} component={route.component} />
        ))}
      </Switch>
    </BrowserRouter>
  );
};