关于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，用于展示页面内容。 - 注册路由:
- 工作过程：当浏览器的
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标签：Demo
- 展示区写
Route标签进行路径的匹配： 的最外侧包裹一个或者
