React - 路由

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

安装 React Router

让我们学习如何在我们的 Expense Manager 应用程序中安装 React Router component。

打开命令提示符，并进入应用程序的根文件夹。

cd /go/to/expense/manager

使用以下命令安装 react-router-dom。

npm install react-router-dom --save

React Router

React Router 提供了四个 component 来管理 React 应用程序中的导航。

Router − Router 是顶层 component。它包围整个应用程序。

Link − 类似于 HTML 中的 anchor tag。它设置目标 URL 以及引用文本。

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

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

Route − 将目标 URL 映射到 component。

嵌套路由

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> India</p>
  </div>
 );
}
export default About;

Contact.jsx

import React from "react";
function Contact() {
 return (
  <div className="Contact">
   <h1>Contact-Us</h1>
   <p>
     India Private Limited, 1st 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 的最新版本中，不再使用 Switch，而是只使用 <Route> 标签。这里就是嵌套路由发生的地方。

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 并按回车。

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

React Router 的优势

以下是 React Router 的优势列表 —

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

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

• 允许不刷新页面进行导航，因为它支持单页 Web 或移动应用。