react history 方式
React 是一种流行的 JavaScript 库，用于构建用户界面。它提供了一种称为 History 的方式，用于在 React 应用程序中管理路由和历史记录。本文将介绍 React History 的使用方法和相关概念。
一、什么是 React History
React History 是 React Router 库的一部分，用于管理 web 应用程序中的路由和历史记录。它允许我们在 React 应用程序中实现导航功能，例如在不刷新页面的情况下改变 URL，并根据 URL 渲染相应的组件。
React History 可以使用三种不同的方式来管理历史记录：browser history、hash history 和 memory history。
1. Browser History
Browser History 使用浏览器的 History API，它提供了对浏览器历史记录的完全控制。它通常在支持 HTML5 History API 的现代浏览器中使用。
使用 Browser History，我们可以通过以下代码创建一个 history 对象：
```jsx
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
```
然后，我们可以将这个 history 对象传递给 Router 组件，以便启用路由功能：
```jsx
import { Router } from 'react-router-dom';
der(
  <Router history={history}>
    <App />
  </Router>,
  ElementById('root')
);
```
现在，我们可以在应用程序中使用包含在 Router 组件中的路由功能了。
2. Hash History
Hash History 使用 URL 的 hash 部分（即带有 # 符号的部分）来管理历史记录。它不需要对服务器进行特殊配置，并且兼容性较好。
使用 Hash History，我们可以通过以下代码创建一个 history 对象：
```jsx
import { createHashHistory } from 'history';
const history = createHashHistory();
```
然后，将这个 history 对象传递给 Router 组件：
```jsx
import { Router } from 'react-router-dom';
der(
  <Router history={history}>
    <App />
  </Router>,
  ElementById('root')
);
react router v6 文档```
现在，我们可以在应用程序中使用 Hash History 来处理路由。
3. Memory History
Memory History 将路由状态存储在内存中，不改变 URL。它主要用于非 web 应用程序，例如移动应用程序和测试环境。
使用 Memory History，我们可以通过以下代码创建一个 history 对象：
```jsx
import { createMemoryHistory } from 'history';
const history = createMemoryHistory();
```
然后，将这个 history 对象传递给 Router 组件：
```jsx
import { Router } from 'react-router-dom';
der(
  <Router history={history}>
    <App />
  </Router>,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。