Reactjs 如何在react路由器中从url中删除哈希

我使用react router进行路由，并使用hashHistory选项，以便从浏览器刷新页面或指定现有路由之一的url，并在正确的页面上登录。 它工作正常，但我在url中看到如下哈希：

这是我的路由配置：

ReactDOM.render((
 <Router history={hashHistory}>
    <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'));

ReactDOM.render((
),
document.getElementById（'app-container'）；

您是否尝试了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'导入{Router，Route，browserHistory}；
ReactDOM.render((
),
document.getElementById（'app-container'）；

此外，考虑到react路由器github文档，hashHistory不用于生产

我应该使用hashHistory吗？

哈希历史记录可以在不配置服务器的情况下工作，因此如果您只是 开始时，请继续使用它。但是，我们不建议使用它 在生产中，每个web应用程序都应该渴望使用browserHistory

试试这个：

// 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>

//v1.x
从“history/lib/createBrowserHistory”导入createBrowserHistory
//v2.0.0
从“react router”导入{browserHistory}
const history=createHashHistory（{queryKey:false}）；

---

您需要从

react路由器导入
browserHistory


并将其传递给
，以便从URL中删除哈希

例如：

import { browserHistory } from 'react-router';

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

从'react router'导入{browserHistory}；
//把你的路线安排在这里
我是个新手，但我使用过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")
);

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Route，Switch}；
ReactDOM.render(
{indexRoutes.map（（道具，键）=>{
返回；
})}
,
document.getElementById（“根”）
);
我相信Dennis Nerush在上面提到过，您需要使用{browserHistory}而不是{hashHistory}，但是要使同一页面呈现正常工作，您需要对服务器进行一些配置以实现这一点

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

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

对于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，您需要转到“重写和重定向”并添加一个新规则，该规则包含以下信息（注意，我仅在AWS上使用过此规则）：

源地址：
目标地址：/index.html
类型：200

如果你想对这个问题做更多的研究，这里有一些链接

（专门针对Apache）

（针对不同服务器的多种方法，或者没有我在上面没有添加的服务器）

（这个用于AWS和放大）
我试过了，散列消失了。但是，浏览器刷新后，我无法登录到同一页面。您是否使用服务器（node.js）为您的文件提供服务？如果您第一次向服务器发出请求（比如在mysite.com上）时，您在点击调用路由器mysite.com/page1的按钮时提供index.html文件，那么它应该可以工作。它将在客户端使用react router显示页面。但是，当你刷新它时，向服务器询问URL mysite.com/page1，但是如果你为每个请求提供index.html文件，并且在每个请求上都有一个类似*的模式，那么你应该看到正确的内容，因为mysite.com/page1->give index.html，但是反应路由器会看到/page1，并像你在第1页上再次单击自己一样完成工作按钮。
browserHistory
需要服务器端渲染。因此，我在生产中使用了
hashHistory
，因为我的项目中不需要服务器端渲染。如果要将
react router dom
与
history
一起使用，请使用：
import createHistory from'history/createBrowserHistory'您提供了一个使用history v2.x或更早版本创建的历史对象。此版本的React Router仅与v3历史对象兼容。请升级到history v3.x。
ok已修复此问题
import{createHistory}来自“history”；//您需要安装此软件包让history=createHistory（）模块“react router”没有导出成员“browserHistory”。ts（2305）感谢也为我工作过。
location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

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