ReactJS - 路由

---

---

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

安装 React 路由器

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

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

使用以下命令安装 react 路由器。

React 路由器

React 路由器提供了四个组件来管理 React 应用程序中的导航。

路由器 - 路由器是第顶级组件。它包含了整个应用程序。

链接 - 类似于html中的锚标签。它设置目标 url 以及引用文本。

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

路由 − 将目标 url 映射到组件。

嵌套路由

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

首页.jsx

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

关于.jsx

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

联系人.jsx

import React from "react";
function Contact() {
	 return (
	 	 <div className="Contact">
	 	 	 <h1>Contact-Us</h1>
	 	 	 <p>
	 	 	 	 北京市海淀区上地十街110号
	 	 	 </p>
	 	 </div>
	 );
}
export default Contact;

创建导航

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

• 主屏幕 - 应用程序的登陆或初始屏幕
• 关于 − 显示应用程序的描述
• 联系方式 − 包含联系方式

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

导航.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;

接下来，创建一个文件，App.js src/components 文件夹下并开始编辑。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 命令为应用程序提供服务。

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

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

React Router的优点

以下是 React Routing 的优点列表 -

• 如果呈现的数据量较少，则组件之间的路由会变得更快。
• 在不同组件之间切换时，实现动画和过渡变得更加容易。这提供了更好的用户体验。
• 允许在不刷新页面的情况下进行导航，因为它允许单页 Web 或移动应用程序。