持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

SPA

SPA意思是单页面Web应用（single page web application）。

整个应用只有一个完整的页面
点击页面中的链接不会刷新页面，原地跳转，只是做页面的局部刷新
数据都需通过异步请求获取

路由

路由就是一个映射关系，在前端项目中这个映射关系就是路径与组件之间的映射关系。
React 中需要引入一个插件库：react-router-dom来使用路由。React路由一般分两种：即 URL 的 hash 和 H5 的 history

路由简单实践

npm install react-route-dom下载安装React web专用的路由库。React有3个路由相关的库，在web开发最主要的就是用这个react-route-dom库。目前默认安装的是V6，和V5区别有点大。

项目目录：

index.js文件里的App组件需要包裹一个或，也就是开始说的hash路由和history路由。

index.js

代码：


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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter><App /></BrowserRouter>
);

新建pages

项目根目录新建pages文件夹，component是存放公共组件或者独立组件的。专门的导航组件当然是新增一个目录，再在该文件夹下新建两个文件夹About，Home

About组件

新增index.js文件：

import React from "react";

function About() {
  return (
    <div style={{ padding: 20 }}>
      <h2>About View</h2>
      <p>在React中使用React Router v6 的指南</p>
    </div>
  );
}

export default About;

```javascript
#### Home组件
新增index.js文件：

import React from "react";

function Home() { return ( <div style={{ padding: 20 }}>

Home View

在React中使用React Router v6 的指南

); }

export default Home;


### App.js
主要页面，引入`Link`, `Route`, `Routes`大三组件，注意这里是React Route V6版本的代码：
```javascript
import About from './components/About'
import Home from './components/Home'
import { Link, Route, Routes } from 'react-router-dom'

function App() {
	return (
		<div>
			<div >
			<Link to="/" >
					/
				</Link>&nbsp;
				<Link to="/home" >
					home
				</Link>&nbsp;
				<Link to="/about" >
					About
				</Link>
			</div>
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/home" element={<Home />} />
				<Route path="/about" element={<About />} />
			</Routes>
		</div>
	);
}

export default App;

效果：

history与hash区别：

上面的例子使用BrowserRouter使用了H5的history，兼容性相对差，比较优雅好看。页面跳转原理是使用了HTML5为浏览器全局的history对象history.pushState和history.replaceState。
来看看改为hashRouter的区别：修改index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {HashRouter} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <HashRouter><App /></HashRouter>
);

效果：

hash路由跳转让地址栏带#，有点丑，在主流ToC的网站中很少见，原理是以锚点的方式实现路由的跳转，hash刷新后导致路由state参数丢失，history不会，下面路由传递参数会讲到这里,#后面属于hash值不会触发页面跳转不会作为资源传递给后端服务器。

React 学习笔记（23）React路由基本概念和用法

SPA

路由