Как удалить хэш из URL-адреса в интерактивном маршрутизаторе

Я использую response-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'));

Ответ 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'));

Кроме того, hashHistory не предназначен для использования в производстве с использованием gitub doc для взаимодействия с маршрутизатором.

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

Должен ли я использовать hashHistory?

История хешей работает без настройки вашего сервера, поэтому, если вы просто начинать, идти вперед и использовать его. Но мы не рекомендуем его использовать в производстве, каждое веб-приложение должно стремиться использовать browserHistory

Ответ 2

Вам нужно будет импортировать browserHistory из browserHistory react-router
и передать его в <Router/>, чтобы удалить хэш из URL-адреса

Пример:

import { browserHistory } from 'react-router';

<Router history={browserHistory}>
 //Place your route here
</Router>

Ответ 3

Попробуйте следующее:

// 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...

Ответ 4

я новичок в реагировании, но я использовал 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")
);

Ответ 5

Я попробовал. это не может работать для меня. Я получил эту ошибку. Uncaught TypeError: Невозможно прочитать свойство "location" неопределенного.