Как убрать хеш из url в реакции-роутере

Question

Я использую реагирующий маршрутизатор для своей маршрутизации, и я использую опцию 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'));

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'));

Более того, hashHistory не предназначен для промышленного использования, учитывая github doc реагирующий маршрутизатор.

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

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

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

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")
);

Answer 3

Я полагаю, что это было упомянуто выше Деннисом Нерушем, вам нужно использовать {browserHistory} вместо {hashHistory}, однако для того, чтобы рендеринг той же страницы работал, вам нужно немного настроить ваш сервер, чтобы это учесть.

В зависимости от того, где вы находитесь или какой сервер используете, есть несколько способов сделать это.

Для Apache вы должны добавить следующее в.htaccess (или создать.htaccess и поместить его в корневую папку вашего веб-сайта):

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Для Node.js/ Express вам нужно добавить следующий код:

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

для серверов Nginx вам необходимо добавить следующее в файл Nginx.conf

location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

Для Amplify вам нужно перейти в Rewrites & Redirects и добавить новое правило со следующей информацией (обратите внимание, что я использовал это только на AWS):

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200

Вот несколько ссылок, если вы хотите провести дополнительное исследование по этой теме.

https://www.andreasreiterer.at/fix-browserrouter-on-apache/#comment-186 (специально для Apache)

https://ui.dev/react-router-cannot-get-url-refresh/ (несколько методов для разных серверов или без сервера, который я не добавил выше)

React Router DOM некорректно работает на Amplify Console AWS (используйте этот для AWS и Amplify)

Answer 4

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

Пример:

import { browserHistory } from 'react-router';

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

Answer 5

Попробуй это:

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