如何从 react-router 中的 url 中删除散列

Question

我正在为我的路由使用 react-router 并使用 hashHistory 选项，以便我可以从浏览器刷新页面或指定我现有路由之一的 url 并在右侧着陆页。它工作正常，但我在 url 中看到哈希是这样的： http://localhost/#/login?_k=ya6z6i

这是我的路由配置：

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'));

Answer 1

您尝试过 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 吗？

Hash history works without configuring your server, so if you're just getting started, go ahead and use it. But, we don't recommend using it in production, every web app should aspire to use browserHistory

Answer 2

试试这个：

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

Answer 3

您需要从 react-router
导入 browserHistory 并将其传递给 <Router /> 以便从 URL

中删除散列

例如：

import { browserHistory } from 'react-router';

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

Answer 4

我是 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")
);

Answer 5

我相信 Dennis Nerush 在上面提到过，您需要使用 {browserHistory} 而不是 {hashHistory}，但是要使相同的页面呈现正常工作，您需要对服务器进行一些配置以允许这样做。

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

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

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

对于Node.js/快递需要添加以下代码：

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/（针对不同服务器的多种方法或我没有在上面添加的没有服务器）

（将这个用于 AWS 和 Amplify）

如何从 react-router 中的 url 中删除散列

How to remove the hash from the url in react-router

reactjs

react-router