如何从 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'));

原文由 Dennis Nerush 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 doc，hashHistory 不适用于生产用途。

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

我应该使用 hashHistory 吗？

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

原文由 Aaleks 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我是新手，但我使用过 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")
);

原文由 Eassa Nassar 发布，翻译遵循 CC BY-SA 4.0 许可协议