Ссылка React Router 4, чтобы не обновлять адресную строку

Следуя приведенным здесь примерам https://reacttraining.com/react-router/examples/url-params.

Я построил свой собственный маршрут для своего сайта следующим образом:

<Router>
  <div>
    <Route path='/' exact component={Layout} />
    <PublicRoute authed={this.state.authed} exact path='/login' component={Login} />
    <PublicRoute authed={this.state.authed} exact path='/register' component={Register} />
    <PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />
    <Route path='/cachaca/:bottle' component={Layout} />

    <Route render={() => <h3>No Match</h3>} />
  </div>
</Router>

Это очень похоже на приведенный пример, за исключением того факта, что навигация (или ссылка на) находится где-то еще на странице.

Сам маршрут работает отлично. Я могу получить информацию о совпадении, я могу успешно проверить, вошел ли пользователь в систему или нет, и так далее.

Моя единственная проблема заключается в том, что строка URL-адреса не меняется, чтобы отражать изменения навигации, поэтому, если я сижу на локальном хосте: 3000/cachaca/1234 и нажимаю, чтобы перейти домой, домашняя страница загрузится, но строка URL-адреса по-прежнему будет показывать ' локальный хост: 3000/cachaca/1234'.

Я видел сообщения, подобные моим, от React Router 2/3, которые, кажется, указывают на то, что поддержка истории является причиной этой проблемы, но я не верю, что это имеет место в Router 4.

В дополнение к этому, пример на веб-сайте обучения реакции работает, а мой (который, похоже, выполняет те же шаги) — нет.

Я что-то упустил здесь? Почему я не получаю таких же результатов, как на обучающем сайте.

Вот навигационная ссылка, которую я использую:

<Link to={"/"}>Home</Link>

Ценю любую помощь, спасибо!


reactjs react-router-v4
person Hookkid    schedule 16.03.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вау, это глупо, но я потратил на это весь свой день, поэтому опубликую это в надежде сэкономить кому-то еще время:

Оказывается, это не сработало, потому что я проводил тестирование в папке webpack-dev-server/, и у react-router 4, похоже, есть проблема с этим.

Как только я перешел с http://localhost:3000/webpack-dev-server/cachaca/asdf на http://localhost:3000/cachaca/asdf веб-сайт запущен ведет себя как надо — как по содержанию, так и по расположению в адресной строке.

Всем удачного кодинга!

person Hookkid    schedule 16.03.2017