ReactJS - 路由

---

---

在 Web 应用中，路由是将 Web URL 绑定到 Web 应用中特定资源的过程。在 React 中，它是将 URL 绑定到组件。React 本身并不支持路由，因为它本质上是一个用户界面库。React 社区提供了许多第三方组件来处理 React 应用中的路由。让我们学习 React Router，它是 React 应用的首选 路由库。

安装 React Router

让我们学习如何在我们的 Expense Manager 应用中安装 React Router 组件。

打开命令提示符并转到应用的根文件夹。

cd /go/to/expense/manager

使用以下命令安装 react router。

npm install react-router-dom --save

React Router

React Router 提供了四个组件来管理 React 应用中的导航。

Router − Router 是顶级组件。它包含整个应用。

Link − 类似于 html 中的锚标记。它设置目标 url 以及参考文本。

<Link to="/">Home</Link>

这里，to 属性用于设置目标 url。

Route − 将目标 url 映射到组件。

嵌套路由

React Router 也支持嵌套路由。让我们使用以下示例来理解嵌套路由以创建一个应用 −

Home.jsx

import React from "react";
function Home() {
  return (
    <div className="Home">
      <h1>This is Home</h1>
    </div>
  );
}
export default Home;

About.jsx

import React from "react";
function About() {
  return (
    <div className="About">
      <h1>AboutUs</h1>
      <p>tutorialspoint India</p>
    </div>
  );
}
export default About;

Contact.jsx

import React from "react";
function Contact() {
  return (
    <div className="Contact">
      <h1>Contact-Us</h1>
      <p>
        Tutorials Point India Private Limited, 4th Floor, Incor9 Building, Plot
        No: 283/A, Kavuri Hills, Madhapur, Hyderabad, Telangana, INDIA-500081
      </p>
    </div>
  );
}
export default Contact;

创建导航

让我们在上面创建的组件之间引入导航。应用的最小屏幕如下所示 −

• 首页 − 应用的登录或初始屏幕

• 关于 − 显示应用的描述

• 联系 − 包含联系信息

以下 Navigate.jsx 文件的完整代码将包含从一个组件到另一个组件的链接。它将从登录页面建立到其他组件的链接。

Navigate.jsx

import React from "react";
import { Outlet, Link } from "react-router-dom";

function Navigate() {
  return (
    <div>
      <ul style={{ listStyle: "none" }}>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About-Us</Link>
        </li>
        <li>
          <Link to="/contact">Contact-Us</Link>
        </li>
      </ul>

      <Outlet />
    </div>
  );
}
export default Navigate;

接下来，在 src/components 文件夹下创建一个文件 App.js 并开始编辑。App 组件的目的是在一个组件中处理所有屏幕。它将配置路由并启用导航到所有其他组件。

我们将 React 库和应用的其他组件导入到 App.jsx。在最新版本的 React 中，我们只使用 <Route> 标记，而不是 Switch。这就是嵌套路由发生的地方。

App.jsx

import { Route, Routes, BrowserRouter } from "react-router-dom";
import "./App.css"
import Home from "./Router/Home";
import About from "./Router/About";
import Contact from "./Router/Contact";
import Navigate from "./Router/Navigate";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Navigate />}>
            <Route index element={<Home />} />

            <Route path="About" element={<About />} />

            <Route path="Contact" element={<Contact />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

接下来，使用 npm 命令启动应用。

npm start

接下来，打开浏览器并在地址栏中输入 https://:3000 并按回车键。

尝试导航链接并确认路由是否正常工作。

React Router 的优点

以下是 React Routing 的优点列表 −

• 如果渲染的数据量较少，则组件之间的路由会更快。

• 在不同组件之间切换时，实现动画和过渡变得更容易。这提供了更好的用户体验。

• 允许在不刷新页面的情况下进行导航，因为它允许单页 Web 或移动应用。