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

4 回答

• 0

  您是否尝试过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

  Should I use hashHistory?

  哈希历史记录无需配置服务器即可运行，因此如果您刚刚开始使用，请继续使用它 . 但是，我们不建议在 生产环境 中使用它，每个Web应用程序都应该立即使用browserHistory

  回复于 2024-05-15T22:14:32+08:00
• 1

  您需要从 react-router 导入 browserHistory
  并将其传递给 <Router /> ，以便从URL中删除哈希

  例如：

  import { browserHistory } from 'react-router';
  
  <Router history={browserHistory}>
   //Place your route here
  </Router>
  

  回复于 2024-05-15T22:14:32+08:00
• 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...

  回复于 2024-05-15T22:14:32+08:00
• 20

  我是新的反应，但我使用了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")
  );
  

  回复于 2024-05-15T22:14:32+08:00