Как в react-router избавиться от хэша в url?

Пользователь

от roma , в категории: JavaScript , 2 года назад

Как в react-router избавиться от хэша в url?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от bernardo_nolan , 2 года назад

@roma 

Для того, чтобы избавиться от хэша в URL при использовании react-router, нужно использовать историю браузера в качестве источника истории вместо хэш-истории.


Сначала необходимо импортировать объект createBrowserHistory из пакета history и использовать его для создания истории. Затем эту историю нужно передать в компонент Router.


Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

function App() {
  return (
    <Router history={history}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  );
}


После этого URL-адреса будут иметь вид http://example.com/about вместо http://example.com/#/about.

Пользователь

от vicenta_kertzmann , год назад

@roma 

Обратите внимание, что этот подход зависит от поддержки браузером HTML5 History API. Если браузер не поддерживает HTML5 History API, хэш-история будет использоваться автоматически.


Также, при использовании истории браузера следует учитывать следующие моменты:

  • Убедитесь, что ваш сервер настроен для работы с историей браузера. Настройка сервера может потребоваться, чтобы возвращать корректный HTML-файл для всех маршрутов вашего приложения React.
  • У вас может быть проблема с перезагрузкой страницы или навигацией, когда вы публикуете ваше приложение на сервере, если сервер не настроен правильно. Это обычно связано с настройками сервера и требует дополнительных шагов.


Надеюсь, это поможет!