react中路由的基本使用

一、路由的介绍

1.1. 相关理解
1.1.1. SPA的理解

1. 单页Web应用（single page web application，SPA）。
2. 整个应用只有一个完整的页面。
3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。
4. 数据都需要通过ajax请求获取, 并在前端异步展现。

1.1.2.路由的理解
5. 什么是路由?
6. 一个路由就是一个映射关系(key:value)
7. key为路径, value可能是function或component

1.1.3.路由的的分类
1.后端路由

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

2. 前端路由：

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

二、路由的使用

1、效果图：

2.1.下载相关库

npm install --save react-router-dom

2.2、导入相关组件和库
这里我们定义了两个路由组件 Hemo 和 About

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

import About from './components/About'
import Home from './components/Home'

创建路由链接并注册路由

   {/* 使用路由链接实现切换组件 */}
           <Link className="list-group-item " to='/about'>About</Link>
           <Link className="list-group-item " to='/home'>Home</Link>
                
  {/* 注册路由 */}
           <Route path='/about' component={About}/>
           <Route path='/home' component={Home}/>
  

注：路由链接中的 to 和注册路由中的 path 要一致

使用路由要使用 BrowserRouter 标签包裹
但是页面上的路由可能有很多，且不在同一地方，使用我们直接把整个App组件包裹起来

import React from 'react'

import ReactDOM from 'react-dom/client'

import { BrowserRouter} from 'react-router-dom'

import App from './App'

const Root = ReactDOM.createRoot(document.getElementById('root'))

Root.render(
    <BrowserRouter>
     <App/>
    </BrowserRouter>
)

个人博客：余生的学习笔记