React路由 | 青训营笔记React Router 是一个用于在 React 应用中实现路由功能的库。它提供了一种声

1. 单页Web应用（single page web application，SPA）。

2. 整个应用只有一个完整的页面。

3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。

4. 数据都需要通过ajax请求获取, 并在前端异步展现。

什么是路由?

1. 一个路由就是一个映射关系(key:value)

2. key为路径, value可能是function或component

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组件

React Router 是一个用于在 React 应用中实现路由功能的库。它提供了一种声明式的方式来定义路由，使得开发者可以方便地管理应用的导航和页面切换。原理如下：

路由器（Router）：React Router 提供了 <BrowserRouter> 和 <HashRouter> 两种类型的路由器组件。路由器组件会监听 URL 的变化，并根据匹配的路径来渲染相应的组件。
路由（Route）：路由组件用于定义特定路径下应该渲染的组件。通过 <Route> 组件，可以指定一个路径和对应的组件，当 URL 匹配到指定路径时，该组件将被渲染。
嵌套路由（Nested Routes）：React Router 支持嵌套路由，即在一个路由组件中嵌套另一个路由组件。这允许开发者构建具有层次结构的路由配置。
路由参数（Route Parameters）：React Router 支持通过路由参数传递数据。可以在定义路由时使用占位符来表示动态的 URL 部分，并在组件中通过 props.match.params 来获取参数的值。
路由跳转（Programmatic Navigation）：React Router 提供了编程式导航的方式，使得开发者可以通过代码来实现页面的跳转。可以使用 history 对象提供的方法，例如 push、replace 等来进行导航。
路由钩子（Route Hooks）：React Router 提供了一些钩子函数，用于在路由发生变化时执行特定的逻辑。例如，可以使用 useParams 钩子来获取路由参数，使用 useHistory 钩子来访问导航历史记录等。

React Router 的核心思想是将路由信息与组件的渲染关联起来，使得在不同的 URL 路径下能够渲染不同的组件。它通过监听 URL 的变化，根据定义的路由规则来匹配并渲染对应的组件，从而实现了在 React 应用中的导航功能。