react-routerV5 hash路由转换成history路由需要改动什么?
时间: 2023-08-04 19:10:14 浏览: 270
vue vue-Router默认hash模式修改为history需要做的修改详解
React Router v5 中的 HashRouter 使用 URL 中的哈希值(#)来控制路由,而 BrowserRouter 使用 HTML5 的 history API。如果你想将 HashRouter 转换为 BrowserRouter,需要进行以下步骤:
1. 安装 history 库
```
npm install history --save
```
2. 更改路由组件的引用
将 `import { HashRouter as Router, Route } from 'react-router-dom';` 改为 `import { Router, Route } from 'react-router-dom';`。
3. 创建一个 history 对象
在 index.js 文件中,使用 createBrowserHistory 函数创建 history 对象,并将其传递给 Router 组件。
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import App from './App';
const history = createBrowserHistory();
ReactDOM.render(
<Router history={history}>
<Route path="/" component={App} />
</Router>,
document.getElementById('root')
);
```
4. 更改路由链接
将 `hash` 链接改为 `history` 链接,例如将 `<a href="#/about">About</a>` 改为 `<a href="/about">About</a>`。
完成以上步骤后,您就可以使用 BrowserRouter 来控制路由了。
阅读全文