第三十章 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

import React, {
    
     Component } from 'react'

export default class Home extends Component {
    
    
  render() {
    
    
    return <h2>我是Home的内容</h2>
  }
}

步骤三：编写组件About

import React, {
    
     Component } from 'react'

export default class About extends Component {
    
    
  render() {
    
    
    return <h2>我是About的内容</h2>
  }
}

步骤四：编写组件App

import React, {
    
     Component } from 'react'
import Home from './components/Home'
import About from './components/About'
import {
    
    Link,Route} from 'react-router-dom'

export default class App extends Component {
    
    
  render() {
    
    
    return (
      <div>
    <div className="row">
      <div className="col-xs-offset-2 col-xs-8">
        <div className="page-header"><h2>React Router Demo</h2></div>
      </div>
    </div>
    <div className="row">
      <div className="col-xs-2 col-xs-offset-2">
        <div className="list-group">
          {
    
    /* <a className="list-group-item" href="./about.html">About</a>
          <a className="list-group-item active" href="./home.html">Home</a> */}
          <Link className='list-group-item' to='/home'>Home</Link>
          <Link className='list-group-item' to='/about'>About</Link>
          
        </div>
      </div>
      <div className="col-xs-6">
        <div className="panel">
          <div className="panel-body">
            <Route path="/home"component={
    
    Home} />
            <Route path="/about"component={
    
    About} />
          </div>
        </div>
      </div>
    </div>
  </div>
    )
  }
}

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

关键代码1：

import {
    
    Link,Route} from 'react-router-dom'

关键代码2：

<Link className='list-group-item' to='/home'>Home</Link>
<Link className='list-group-item' to='/about'>About</Link>

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

关键代码3：

<Route path="/home"component={
    
    Home} />
<Route path="/about"component={
    
    About} />

通过组件Route实现路由注册

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

import React from 'react'
import ReactDOM from 'react-dom'
import {
    
    BrowserRouter} from 'react-router-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

这里的App组件被BrowserRouter包裹, 使得整个应用共用一个路由器。

查看效果：

在这里插入图片描述

总结

明确好界面中的导航区、展示区
导航区的a标签改为Link标签：<link to="/xxxx">Demo</Link>
展示区写Route标签进行路径的匹配：<Route path='/xxxx' component={Demo}/>
<App/>的最外侧包裹一个<BrowserRouter>或者<HashRouter>