ReactJS - BrowserRouter

路由是前端应用程序中的重要概念之一。React 社区提供了一个出色的路由器库，名为 React Router。在本章中，我们将学习 React 路由器的概念以及如何在 React 应用程序中使用它。

路由器概念

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

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

BrowserRouter − BrowserRouter 是顶级组件。它创建一个历史记录(导航历史记录)，将初始位置(表示"用户所在的位置"的路由器对象)放入反应状态，并最终订阅位置 URL。

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

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

<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>

此处，

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

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

Outlet − Outlet 组件渲染一组匹配中的下一个匹配。

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

这里，

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

Link − Link 组件类似于锚标记，用于导航目的。一旦用户单击它，它会根据其属性更改位置

<Link to="/admin" />

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

navigate("/admin")

路由器工作流程

让我们考虑一个 React 应用程序有两个五个页面/组件，如下所示 −

Home (/)
Contact (/contact)
Register (/register)
Admin (/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>

让我们看看管理仪表板网址 (/admin/dashboard) 将如何被 React Router 匹配和呈现。

首先，React 库将呈现我们的应用程序。由于我们的应用程序在呈现树的顶部有 BrowserRouter，因此它会被调用和呈现
BrowserRouter 组件创建历史记录，将初始位置置于状态中并订阅网址
Routes 组件将检查其所有子组件，构建路由器配置并最终呈现第一个匹配项 (/admin => )
Admin 组件将被呈现。它将有一个 Outlet 组件，如下所示 -

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

Outlet 组件在其自身内呈现下一个匹配项 (/admin/dashboard => )
用户可以单击仪表板中的链接 (Link 组件)，例如"/admin/category"
Link 组件调用 navigation("/admin/category") 方法
历史记录 (对象) 更改 url 并通知 BrowserRouter
由于 BrowserRouter 组件已订阅 url，BrowserRouter 组件将重新呈现并重复整个过程 (从 2 开始)

如何应用路由器

首先，创建一个新的 React 应用程序并使用下面的方法启动它命令。

create-react-app myapp
cd myapp
npm start

接下来，使用以下命令安装 react router 库，

npm install --save react-router-dom

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

// 删除所有 css 类

接下来，在 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 是主要组件。它将具有路由器设置作为其子项，并根据路由器设置呈现整个应用程序。
Routes 是主要路由器组件。它包含单个路由器设置的列表。
Route 是实际的路由器组件，具有 Web 路径 (/home) 和组件 (Home) 之间的映射。
Route 可以嵌套以支持嵌套路径。

路由中定义的映射如下 −

/ 映射到 Layout 组件。 Layout 组件将在下一步中创建。
/home 映射到 Home 组件，并嵌套在 / 路径下。
/greet 映射到 Greet 组件，并嵌套在 / 路径下。

接下来，创建一个布局组件 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组件。
Link组件用于创建网页导航链接。
Link组件的to属性设置为父级BrowserRouter组件中定义的路由之一。
使用路由器设置中可用的/和/greet路由。
Outlet组件用于在底部加载所选组件。在初始渲染期间，它将加载默认组件(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

此处，Link 组件用于导航回主页。

接下来，更新 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 Router 将停止并呈现匹配的组件。
* 模式将匹配所有链接。由于它被放置在最后一个条目中，因此它将匹配所有未定义/未知的链接。

接下来，更新 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;

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