如何从React-Router中的URL中删除哈希

小编典典

如何从React-Router中的URL中删除哈希

reactjs

我正在使用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'));

阅读 553

2020-07-22

共1个答案

小编典典

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

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应用程序都应渴望使用浏览器。

2020-07-22