您是否尝试过 browserHistory 选项？您还可以从浏览器刷新页面或指定现有路由之一的 url 并登陆正确的页面。

import { Router, Route, browserHistory } from 'react-router';

ReactDOM.render((
 <Router history={browserHistory}>
    <Route path='/' component={MasterPage}>
      <IndexRoute component={LoginPage} />
      <Route path='/search' component={SearchPage} />
      <Route path='/login' component={LoginPage} />
      <Route path='/payment' component={PaymentPage} />
    </Route>
  </Router>),
    document.getElementById('app-container'));

此外，考虑到 react-router github 文档，hashHistory 不适用于生产用途。

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory

我应该使用 hashHistory 吗？

哈希历史无需配置您的服务器即可工作，因此如果您刚刚开始，请继续使用它。但是，我们不建议在生产中使用它，每个 Web 应用程序都应该渴望使用 browserHistory

我刚开始react，但我使用过 BrowserRouter 并且它工作正常：-

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter, Route, Switch } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter >
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route to={prop.path} component={prop.component} key={key} />;
      })}
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

我相信上面是 Dennis Nerush 提到的，您需要使用 {browserHistory} 而不是 {hashHistory}，但是要使相同的页面呈现工作，您需要稍微配置您的服务器以允许这样做。

根据您的托管位置或您使用的服务器，有几种方法可以做到这一点

对于Apache，您必须将以下内容添加到 .htaccess（或创建 .htaccess 并将其放在您网站的根文件夹中）：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

对于 Node.js/ Express，您需要添加以下代码：

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

对于 Nginx 服务器，您需要将以下内容添加到 Nginx.conf 文件中

location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

对于 Amplify，您需要转到 Rewrites & Redirects 并添加一个包含以下信息的新规则（注意我只在 AWS 上使用过）：

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200

如果您想对该主题进行更多研究，这里有一些链接。

https://www.andreasreiterer.at/fix-browserrouter-on-apache/#comment-186（专用于Apache）

https://ui.dev/react-router-cannot-get-url-refresh/（针对不同服务器或没有服务器的多种方法，我没有在上面添加）

React Router DOM 在 Amplify Console AWS 上无法正常工作（将此用于 AWS 和 Amplify）

您需要导入browserHistoryfromreact-router
并将其传递给 the<Router />以从 URL 中删除哈希

前任：

import { browserHistory } from 'react-router';

<Router history={browserHistory}>
 //Place your route here
</Router>

试试这个：

// v1.x
import createBrowserHistory from 'history/lib/createBrowserHistory'
<Router history={createBrowserHistory()} />

// v2.0.0
import { browserHistory } from 'react-router'
<Router history={browserHistory} />


const history = createHashHistory({ queryKey: false });
<Router history={history}>
</Router>

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-custom-histories

https://github.com/reactjs/react-router/blob/8ef625e8fa7c41dda0f3d1d68a10b74bd93a4101/docs/guides/ba...