react 路由 history 模式-开发模式配置

[huangshuwei]

前言

如题，这篇文章记录 react 路由在开发阶段的 history 模式配置

1、项目以 create-react-app 生成为例 2、路由使用的是 react-router-dom

修改项目中的路由模式

将 hash 模式 改为 history 模式，即：

import {HashRouter as Router} from 'react-router-dom'

替换成

import {BrowserRouter as Router} from 'react-router-dom'

效果

调试模式运行后，url 地址将由 ‘#’变为了‘/’。且刷新回退一切正常，开发模式没有任何问题，但是如果将项目发布后放到站点服务器上，那么页面刷新后将无法正常显示。所以除了在开发阶段配置 history 模式外，在站点服务器上也要增加额外的配置。详情见下篇文章。

完--