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;

创建导航

让我们介绍一下我们上面创建的组件之间的导航。应用程序的最小屏幕如下所示 −

• Home screen − 应用程序的着陆或初始屏幕

• About − 显示应用程序的描述

• 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

接下来，打开浏览器并在地址栏中输入 http://localhost:3000 并按 Enter。

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

React Router 的优势

以下是 React Routing 的优势列表 −

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

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

• 允许导航而无需刷新页面，因为它允许单页网络或移动应用程序。