第三十章 React的路由基本使用

关于React路由，我们在学习之前先了解一下其他知识点：SPA应用、路由的理解、react中如何使用路由。

SPA应用的理解

我们知道React脚手架给我们构建的是一个单页应用程序（SPA），在页面加载时，只会加载一个HTML文件，然后使用JavaScript动态地更新页面内容。这意味着您需要使用JavaScript来处理路由，以便在用户导航时更新页面内容，而不是通过传统的HTTP请求/响应循环加载新页面。

SPA全称：single page web application
整个应用只有一个完整的页面
点击页面中的路由链接不会刷新页面，只会做页面的局部更新
数据都需要通过ajax请求获取, 并在前端异步展现

在这里插入图片描述

SPA的优点包括：

- 更快的页面加载速度，因为只需要加载一次HTML文件，之后只需要更新页面内容。
- 更好的用户体验，因为页面不会因为每次导航而重新加载。
- 更容易实现动态内容，因为可以使用JavaScript来更新页面内容。

SPA的缺点包括：

- 对SEO不友好，因为搜索引擎通常只会抓取初始HTML文件，而不会执行JavaScript来抓取动态内容。
- 对于较大的应用程序，可能会导致性能问题，因为需要加载大量的JavaScript代码。
- 对于不支持JavaScript的用户，可能无法访问应用程序。

路由的理解

1、什么是路由？

简单的说一个路由就是一对映射关系 (key: value), key为路径，value为function或者component

2、路由分类

后端路由：

理解： value是function, 用来处理客户端提交的请求。
注册路由： router.get(path, function(req, res))
工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由：

浏览器端路由，value是component，用于展示页面内容。
注册路由: <Route path="/test" component={Test}>
工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

React中如何使用路由

为了在React应用程序中实现路由，您可以使用React Router库。

React Router库通过使用浏览器的历史记录API来操作URL并根据当前URL呈现适当的组件来工作。当用户单击与定义的路由匹配的链接时，URL会更改并呈现相应的组件。React Router库提供了多种路由类型，包括BrowserRouter、HashRouter、MemoryRouter等。其中BrowserRouter使用HTML5的history API来实现路由，HashRouter使用URL的hash部分来实现路由，MemoryRouter则将路由信息存储在内存中。

在使用React Router时，您需要将路由器包装在应用程序的根组件中，并使用Route组件来定义每个路由。Route组件可以使用path属性来定义路由的路径，component属性来指定路由匹配时要呈现的组件。Switch组件用于包装Route组件，以确保只有一个路由匹配时才会呈现相应的组件。如果您需要在路由之间传递参数，可以使用URL参数或查询参数。URL参数是在路径中定义的参数，例如/users/:id，其中:id是一个参数。查询参数是在URL中以?开头的键值对，例如/users?id=123。您可以使用React Router提供的useParams和useLocation钩子来访问这些参数。

编写案例

步骤一：安装React官方维护的路由依赖库

npm i react-router-dom --save

步骤二：编写组件Home

<span class="token keyword">importspan> React<span class="token punctuation">,span> <span class="token punctuation">{span> Component <span class="token punctuation">}span> <span class="token keyword">fromspan> <span class="token string">'react'span>

<span class="token keyword">exportspan> <span class="token keyword">defaultspan> <span class="token keyword">classspan> <span class="token class-name">Homespan> <span class="token keyword">extendsspan> <span class="token class-name">Componentspan> <span class="token punctuation">{span>
  <span class="token function">renderspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
    <span class="token keyword">returnspan> <span class="token operator"><span>h2<span class="token operator">>span>我是Home的内容<span class="token operator"><span><span class="token operator">/span>h2<span class="token operator">>span>
  <span class="token punctuation">}span>
<span class="token punctuation">}span>

步骤三：编写组件About

<span class="token keyword">importspan> React<span class="token punctuation">,span> <span class="token punctuation">{span> Component <span class="token punctuation">}span> <span class="token keyword">fromspan> <span class="token string">'react'span>

<span class="token keyword">exportspan> <span class="token keyword">defaultspan> <span class="token keyword">classspan> <span class="token class-name">Aboutspan> <span class="token keyword">extendsspan> <span class="token class-name">Componentspan> <span class="token punctuation">{span>
  <span class="token function">renderspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
    <span class="token keyword">returnspan> <span class="token operator"><span>h2<span class="token operator">>span>我是About的内容<span class="token operator"><span><span class="token operator">/span>h2<span class="token operator">>span>
  <span class="token punctuation">}span>
<span class="token punctuation">}span>

步骤四：编写组件App

<span class="token keyword">importspan> React<span class="token punctuation">,span> <span class="token punctuation">{span> Component <span class="token punctuation">}span> <span class="token keyword">fromspan> <span class="token string">'react'span>
<span class="token keyword">importspan> Home <span class="token keyword">fromspan> <span class="token string">'./components/Home'span>
<span class="token keyword">importspan> About <span class="token keyword">fromspan> <span class="token string">'./components/About'span>
<span class="token keyword">importspan> <span class="token punctuation">{span>Link<span class="token punctuation">,span>Route<span class="token punctuation">}span> <span class="token keyword">fromspan> <span class="token string">'react-router-dom'span>

<span class="token keyword">exportspan> <span class="token keyword">defaultspan> <span class="token keyword">classspan> <span class="token class-name">Appspan> <span class="token keyword">extendsspan> <span class="token class-name">Componentspan> <span class="token punctuation">{span>
  <span class="token function">renderspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
    <span class="token keyword">returnspan> <span class="token punctuation">(span>
      <span class="token operator"><span>div<span class="token operator">>span>
    <span class="token operator"><span>div className<span class="token operator">=span><span class="token string">"row"span><span class="token operator">>span>
      <span class="token operator"><span>div className<span class="token operator">=span><span class="token string">"col-xs-offset-2 col-xs-8"span><span class="token operator">>span>
        <span class="token operator"><span>div className<span class="token operator">=span><span class="token string">"page-header"span><span class="token operator">>span><span class="token operator"><span>h2<span class="token operator">>span>React Router Demo<span class="token operator"><span><span class="token operator">/span>h2<span class="token operator">>span><span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
      <span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
    <span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
    <span class="token operator"><span>div className<span class="token operator">=span><span class="token string">"row"span><span class="token operator">>span>
      <span class="token operator"><span>div className<span class="token operator">=span><span class="token string">"col-xs-2 col-xs-offset-2"span><span class="token operator">>span>
        <span class="token operator"><span>div className<span class="token operator">=span><span class="token string">"list-group"span><span class="token operator">>span>
          <span class="token punctuation">{span><span class="token comment">/* <a className="list-group-item" href="./about.html">About</a>
          <a className="list-group-item active" href="./home.html">Home</a> */span><span class="token punctuation">}span>
          <span class="token operator"><span>Link className<span class="token operator">=span><span class="token string">'list-group-item'span> to<span class="token operator">=span><span class="token string">'/home'span><span class="token operator">>span>Home<span class="token operator"><span><span class="token operator">/span>Link<span class="token operator">>span>
          <span class="token operator"><span>Link className<span class="token operator">=span><span class="token string">'list-group-item'span> to<span class="token operator">=span><span class="token string">'/about'span><span class="token operator">>span>About<span class="token operator"><span><span class="token operator">/span>Link<span class="token operator">>span>
          
        <span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
      <span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
      <span class="token operator"><span>div className<span class="token operator">=span><span class="token string">"col-xs-6"span><span class="token operator">>span>
        <span class="token operator"><span>div className<span class="token operator">=span><span class="token string">"panel"span><span class="token operator">>span>
          <span class="token operator"><span>div className<span class="token operator">=span><span class="token string">"panel-body"span><span class="token operator">>span>
            <span class="token operator"><span>Route path<span class="token operator">=span><span class="token string">"/home"span>component<span class="token operator">=span><span class="token punctuation">{span>Home<span class="token punctuation">}span> <span class="token operator">/span><span class="token operator">>span>
            <span class="token operator"><span>Route path<span class="token operator">=span><span class="token string">"/about"span>component<span class="token operator">=span><span class="token punctuation">{span>About<span class="token punctuation">}span> <span class="token operator">/span><span class="token operator">>span>
          <span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
        <span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
      <span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
    <span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
  <span class="token operator"><span><span class="token operator">/span>div<span class="token operator">>span>
    <span class="token punctuation">)span>
  <span class="token punctuation">}span>
<span class="token punctuation">}span>

其中关键代码有三个部分：

关键代码1：

<span class="token keyword">importspan> <span class="token punctuation">{span>Link<span class="token punctuation">,span>Route<span class="token punctuation">}span> <span class="token keyword">fromspan> <span class="token string">'react-router-dom'span>

关键代码2：

<span class="token operator"><span>Link className<span class="token operator">=span><span class="token string">'list-group-item'span> to<span class="token operator">=span><span class="token string">'/home'span><span class="token operator">>span>Home<span class="token operator"><span><span class="token operator">/span>Link<span class="token operator">>span>
<span class="token operator"><span>Link className<span class="token operator">=span><span class="token string">'list-group-item'span> to<span class="token operator">=span><span class="token string">'/about'span><span class="token operator">>span>About<span class="token operator"><span><span class="token operator">/span>Link<span class="token operator">>span>

在React中靠路由链接通过组件Link实现切换组件–编写路由链接

关键代码3：

<span class="token operator"><span>Route path<span class="token operator">=span><span class="token string">"/home"span>component<span class="token operator">=span><span class="token punctuation">{span>Home<span class="token punctuation">}span> <span class="token operator">/span><span class="token operator">>span>
<span class="token operator"><span>Route path<span class="token operator">=span><span class="token string">"/about"span>component<span class="token operator">=span><span class="token punctuation">{span>About<span class="token punctuation">}span> <span class="token operator">/span><span class="token operator">>span>

通过组件Route实现路由注册

步骤五：编写入口文件index.js

<span class="token keyword">importspan> React <span class="token keyword">fromspan> <span class="token string">'react'span>
<span class="token keyword">importspan> ReactDOM <span class="token keyword">fromspan> <span class="token string">'react-dom'span>
<span class="token keyword">importspan> <span class="token punctuation">{span>BrowserRouter<span class="token punctuation">}span> <span class="token keyword">fromspan> <span class="token string">'react-router-dom'span>
<span class="token keyword">importspan> App <span class="token keyword">fromspan> <span class="token string">'./App'span>

ReactDOM<span class="token punctuation">.span><span class="token function">renderspan><span class="token punctuation">(span>
  <span class="token operator"><span>React<span class="token punctuation">.span>StrictMode<span class="token operator">>span>
    <span class="token operator"><span>BrowserRouter<span class="token operator">>span>
      <span class="token operator"><span>App<span class="token operator">/span><span class="token operator">>span>
    <span class="token operator"><span><span class="token operator">/span>BrowserRouter<span class="token operator">>span>
  <span class="token operator"><span><span class="token operator">/span>React<span class="token punctuation">.span>StrictMode<span class="token operator">>span><span class="token punctuation">,span>
  document<span class="token punctuation">.span><span class="token function">getElementByIdspan><span class="token punctuation">(span><span class="token string">'root'span><span class="token punctuation">)span>
<span class="token punctuation">)span>