如何从 react-router 中的 url 中删除哈希 [英] How to remove the hash from the url in react-router

问题描述

我正在使用 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 中删除哈希的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！