如何从 react-router 中的 url 中删除哈希

问题描述：

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

I'm using react-router for my routing and I use the hashHistory option so that I could refresh the page from the browser or specify a url of one of my existing routes and land on the right page. It works fine but I see the hash in the url like this: 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'));

答

您是否尝试过 browserHistory 选项?您还可以从浏览器刷新页面或指定现有路线之一的网址并登陆正确的页面.

Did you try the browserHistory option ? You will be able also to refresh the page from the browser or specify a url of one of existing routes and land on the right page.

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 不适用于生产用途.

Moreover hashHistory is not for production use considering the react-router github doc.

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

我应该使用 hashHistory 吗?

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

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

如何从 react-router 中的 url 中删除哈希

相关推荐