React路由问题：browserHistory刷新报错，需实现无哈希可刷新路由

嘿，我来帮你搞定这个路由的问题！

你遇到的情况其实很常见：用browserHistory时刷新报错，是因为服务器不知道怎么处理这些路由路径；用hashHistory虽然能刷新，但URL里的#又不太美观。下面我给你一步步解决这个问题，实现无哈希且支持刷新的路由：

问题根源先搞懂 #

当你用browserHistory时，刷新页面的瞬间，浏览器会直接向服务器请求当前URL的完整路径（比如/dashboard），但你的服务器并没有为这些路由路径配置对应的资源，所以会返回404错误。而hashHistory是靠URL里的哈希部分（#后面的内容）来管理路由，服务器只会处理哈希前面的域名部分，所以刷新时服务器还是返回你的React入口文件，路由由前端接管，自然不会报错，但URL就带了#。

解决方案分两步走 #

1. 把代码里的hashHistory换成browserHistory

先修改你的React路由代码，切换到browserHistory：

// 导入browserHistory替换hashHistory
import { Router, Route, browserHistory } from 'react-router';

// ... 其他代码不变 ...

ReactDOM.render(
 <Provider store={store}>
 {/* 把history换成browserHistory */}
 <Router history={browserHistory}>
 <Route path="/homepage" component={Homepage} />
 <Route path="/login" component={Login} />
 <Route path="/signup" component={Signup} />
 <Route path="/dashboard" component={UserHomepage} />
 <Route path="/" component={Homepage} />
 <Route path="*" component={Homepage} />
 </Router>
 </Provider>,
 document.getElementById('app')
);

2. 配置服务器，让所有路由请求都返回你的入口HTML文件

这是最关键的一步，需要让服务器不管收到什么路由路径的请求，都返回你的React项目入口文件（通常是index.html），这样React Router才能在前端接管路由的处理。

根据你使用的服务器类型，配置方式不同：

• Nginx：在你的server配置块里添加这段规则：

location / {
  try_files $uri $uri/ /index.html;
}

• Apache：在项目根目录创建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

• Node.js Express：如果用Express做后端服务器，添加这个中间件：

const path = require('path');
// 假设你的index.html在build目录下
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build/index.html'));
});

开发环境的额外配置

如果你是在本地开发（比如用webpack-dev-server），需要在webpack配置里开启historyApiFallback：

module.exports = {
  // ... 其他配置 ...
  devServer: {
    historyApiFallback: true, // 开启这个后，开发环境刷新就不会报错了
  }
};

这样配置完成后，你就能拥有不带哈希符号的URL，而且刷新页面也不会报错啦！另外，我注意到你的checkAuth函数是空的，如果之后需要做权限验证（比如未登录用户不能访问dashboard），可以在这个函数里添加逻辑，比如判断用户是否登录，未登录就跳转到登录页。

内容的提问来源于stack exchange，提问作者user7489378