ReactJS - 浏览器路由器

---

---

路由是前端应用程序中的重要概念之一。React 社区提供了一个优秀的路由器库，叫做 React Router。在本章中，让我们学习 React 路由器的概念以及如何在 react 应用程序中使用它。

路由器概念

路由器的主要目的是将给定的 url 与 react 组件匹配并渲染匹配的组件。除了匹配和渲染之外，路由器还应该管理浏览器的历史记录，以便在浏览器中有效地向前和向后导航。

在了解路由器的工作原理之前，让我们了解 react 路由器库的一些有用组件。

BrowserRouter - BrowserRouter是顶级组件。它创建一个历史记录（导航历史记录），将初始位置（表示“用户所在位置”的路由器对象）置于反应状态，最后订阅位置 URL。

<BrowserRouter>
	 	<!-- children -->
</BrowserRouter>

路由 - 路由将递归其子节点并构建路由器配置。它将配置的路由与位置进行匹配，并呈现第一个匹配的路由元素。

<BrowserRouter>
	 	<Routes>
	 	 	 <Route path="/" element={<App />}>
	 	 	 	 	<Route index element={<Home />} />
	 	 	 	 	 	 <Route path="admin" element={<Admin />}>
	 	 	 	 	 	 <Route path="product" element={<ProductListing />} />
	 	 	 	 	 	 <Route path="category" element={<CategoryListing />} />
	 	 	 	 	 	 <Route index element={<Dashboard />} />
	 	 	 	 	</Route>
	 	 	 </Route>
	 	 	 <Route path="/login" element={<Login />}>
	 	 	 	 	<!-- more nested routes -->
	 	 	 </Route>
	 	 	 <!-- more routes -->
	 	</Routes>
</BrowserRouter>

这里

• /path 映射到 App 组件。
• /path 索引组件映射到 Home 组件。
• /admin 路径映射到 Admin 组件。
• /admin 路径的索引组件映射到 Dashboard 组件。
• /admin/product 路径与 ProductListing 组件匹配。
• /admin/category 路径与 CategoryListing 组件匹配。
• /admin/dashboard 路径与 Dashboard 组件匹配。

路由 - 路由是实际的路由器配置。它可以嵌套到类似于文件夹的任何级别。

Outlet - Outlet 组件呈现一组匹配项中的下一个匹配项。

function Hello() {
	 	return (
	 	 	 <div>Hello</div>
	 	 	 <Outlet />
	 	)
}

这里

• 将 Outlet 组件放置在 你好组件的底部。
• Router 将在 Outlet 组件内呈现下一个匹配项。

链接 - 链接组件类似于锚标签，用于导航目的。一旦用户点击它，它就会根据它的位置改变到道具的位置

 <Link to="/admin" />

navigate（） − navigate（） 是一个用于导航目的的 API，类似于 Link 组件。

 navigate("/admin")

路由器工作流

让我们考虑一个 react 应用程序有两个 5 个页面/组件，如下所示 -

• 家 （/）
• 联系方式 （/contact）
• 注册 （/register）
• 管理员 （/admin）
• AdminDashboard （/admin/dashboard）

路由器配置示例如下 -

<BrowserRouter>
	 	<Routes>
	 	 	 <Route path="/" element={<App />}>
	 	 	 	 	<Route index element={<Home />} />
	 	 	 	 	<Route path="contact" element={<Contact />} />
	 	 	 	 	<Route path="register" element={<Register />} />
	 	 	 	 	<Route path="admin" element={<Admin />}>
	 	 	 	 	<Route path="dashboard" element={<AdminDashboard />} />
	 	 	 	 	<Route path="category" element={<CategoryListing />} />
	 	 	 	 	<Route index element={<AdminDashboard />} />
	 	 	 </Route>
	 	</Routes>
</BrowserRouter>

让我们看看 react 路由器将如何匹配和呈现管理员仪表板 url （/admin/dashboard）。

• 首先，react 库将渲染我们的应用程序。由于我们的应用程序将 BrowserRouter 位于渲染树的顶部，因此它会被调用并呈现
• BrowserRouter 组件创建一个历史记录，将初始位置置于状态并订阅 url
• 路由组件将检查其所有子项，构建路由器配置，最后呈现第一个匹配项 （/admin => ）
• 将呈现 Admin 组件。它将有一个 Outlet 组件，如下所示 -

function Admin() {
	 	return (
	 	 	 <div>
	 	 	 	 	<!-- Admin content -->
	 	 	 </div>
	 	<Outlet />
	 	)
}

• Outlet 组件在其自身内呈现下一个匹配项 （/admin/dashboard => ）
• 用户可以在仪表板中单击链接（链接组件），例如“/admin/category”
• 链接组件调用 navigate（“/admin/category”） 方法
• 历史记录（对象）更改 url 并通知 BrowserRouter
• 由于 BrowserRouter 组件已经订阅了 url，因此 BrowserRouter 组件将被重新渲染，并且整个过程将重复（从 2 开始）

如何应用路由器

首先，创建一个新的 react 应用程序并使用以下命令启动它。

接下来，使用以下命令安装 react 路由器库，

接下来，打开 App.css （src/App.css） 并删除所有 CSS 类。

 // remove all css classes

接下来，在 src 下创建一个文件夹 Pages，并创建一个新的主页组件 Home （src/Pages/Home.js） 并呈现简单的主页内容，如下所示 -

function Home() {
	 	return <h3>Home</h3>
}
export default Home

接下来，创建一个新的问候页面组件 Greeting （src/Pages/Greeting.js） 并呈现简单的问候语，如下所示 -

function Greeting() {
	 	return <h3>Hello World!</h3>
}
export default Greeting;

接下来，打开App.js文件并渲染一个 BrowserRoutes 组件，如下所示 -

import './App.css'
import React from 'react';

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Layout from './Pages/Layout';
import Home from './Pages/Home';
import Greeting from './Pages/Greeting';

function App() {
	 	return (
	 	 	 <BrowserRouter>
	 	 	 	 	<Routes>
	 	 	 	 	 	 <Route path="/" element={<Layout />}>
	 	 	 	 	 	 	 	<Route index element={<Home />} />
	 	 	 	 	 	 	 	<Route path="greet" element={<Greeting />} />
	 	 	 	 	 	 </Route>
	 	 	 	 	</Routes>
	 	 	 </BrowserRouter>
	 	);
}
export default App;

这里

• BrowserRouter 是主要组件。它将路由器设置作为其子项，并根据路由器设置呈现整个应用程序。
• 路由是主要的路由器组件。它包含单个路由器设置的列表。
• Route 是实际的路由器组件，在 Web 路径 （/home） 和组件 （Home） 之间进行映射。
• 路由可以嵌套以支持嵌套路径。

路由中定义的映射如下 -

• / 映射到 Layout 组件。布局组件将在下一步中创建。
• /home 映射到 Home 组件，并嵌套在 / path 下。
• /greet 映射到 Greet 组件，并且它嵌套在 / path 下。

接下来，创建一个 Layout 组件 Layout （src/Pages/Layout.js）。布局组件的目的是通过导航链接显示整个应用程序。它是应用程序的主要组成部分，指向/路由。Layout组件的源代码如下：

import { Outlet, Link } from "react-router-dom";
function Layout() {
	 	return (
	 	 	 <>
	 	 	 	 	<nav>
	 	 	 	 	 	 <ul>
	 	 	 	 	 	 	 	<li>
	 	 	 	 	 	 	 	 	 <Link to="/">Home</Link>
	 	 	 	 	 	 	 	</li>
	 	 	 	 	 	 	 	<li>
	 	 	 	 	 	 	 	 	 <Link to="/greet">Greeting</Link>
	 	 	 	 	 	 	 	</li>
	 	 	 	 	 	 </ul>
	 	 	 	 	</nav>
	 	 	 	 	<Outlet />
	 	 	 </>
	 	)
}
export default Layout;

这里

• 导入的 Link 和 Outlet 组件。
• 链接组件用于创建 Web 导航链接。
• link 组件的 to props 使用父 BrowserRouter 组件中定义的路由之一进行设置。
• 路由器设置中可用的 / 和 /greet 路由。
• 出口组件用于底部，用于加载所选组件。在初始渲染期间，它将加载默认组件（home）。
• 一旦用户点击网页链接，它将从 to 属性获取路由器路径，并通过路由器设置获取映射的组件。最后，它将在 Outlet 组件内呈现组件。

接下来，创建一个新组件 PageNotAvailable （src/Pages/PageNotAvailable.js），以在链接与任何路由器设置不匹配时显示。

import { Link } from "react-router-dom"
function PageNotAvailable() {
	 	return (
	 	 	 <p>The page is not available. Please <Link to=
	 	 	 "/">click here</Link> to go to home page.</p>
	 	)
}
export default PageNotAvailable

在这里，链接组件用于导航回主页。

接下来，更新 App 组件，并在路由器设置中包含 PageNotAvailable 组件。

import './App.css'
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Layout from './Pages/Layout';
import Home from './Pages/Home';
import Greeting from './Pages/Greeting';
import PageNotAvailable from './Pages/PageNotAvailable'
function App() {
	 	return (
	 	 	 <BrowserRouter>
	 	 	 	 	<Routes>
	 	 	 	 	 	 <Route path="/" element={<Layout />}>
	 	 	 	 	 	 	 	<Route index element={<Home />} />
	 	 	 	 	 	 	 	<Route path="greet" element={<Greeting />} />
	 	 	 	 	 	 	 	<Route path="*" element={<PageNotAvailable />} />
	 	 	 	 	 	 </Route>
	 	 	 	 	</Routes>
	 	 	 </BrowserRouter>
	 	);
}
export default App;

这里

• 当用户点击一个链接时，react router 会尝试按照给定的顺序逐个匹配点击的链接和路由器设置。如果链接匹配，则 React 路由器将停止并渲染匹配的组件。
• * 模式将匹配所有链接。由于它被放置在最后一个条目中，因此它将匹配所有未定义/未知的链接。

接下来，更新 Layout 组件并添加不可用链接，以检查 PageNotAvailable 组件是否已正确配置。

import { Outlet, Link } from "react-router-dom";
function Layout() {
	 	return (
	 	 	 <>
	 	 	 	 	<nav>
	 	 	 	 	 	 <ul>
	 	 	 	 	 	 	 	<li>
	 	 	 	 	 	 	 	 	 <Link to="/">Home</Link>
	 	 	 	 	 	 	 	</li>
	 	 	 	 	 	 	 	<li>
	 	 	 	 	 	 	 	 	 <Link to="/greet">Greeting</Link>
	 	 	 	 	 	 	 	</li>
	 	 	 	 	 	 	 	<li>
	 	 	 	 	 	 	 	 	 <Link to="/unknown">Unavailable page</Link>
	 	 	 	 	 	 	 	</li>
	 	 	 	 	 	 </ul>
	 	 	 	 	</nav>
	 	 	 	 	<Outlet />
	 	 	 </>
	 	)
}
export default Layout;

最后，在浏览器中打开应用程序并检查最终结果。应用程序将如下所示 -

用户可以使用导航链接导航到任何页面，如上述输出所示。

总结

React 路由器易于配置和使用。它没有那么多花哨的功能，但具有链接、出口、路线和路线等必要功能，可以创建带有导航链接的完整 Web 应用程序。