Сделать так, чтобы компонент Switch учитывал фрагменты URL с помощью React Router?

Question

Как я могу сделать маршрутизацию хэша с React Router?

Это прекрасно работает:

return (
      <div>
        <div>
          <Link to="/one">One</Link>
          <Link to="/two">Two</Link>
        </div>
        <Switch>
          <Route exact path="/one" component={One} />
          <Route exact path="/two" component={Two} />
          <Route component={Three} />
        </Switch>
      </div>
    );

Однако, это всегда делает третий компонент:

return (
      <div>
        <div>
          <Link to="/#one">One</Link>
          <Link to="/#two">Two</Link>
        </div>
        <Switch>
          <Route exact path="/#one" component={One} />
          <Route exact path="/#two" component={Two} />
          <Route component={Three} />
        </Switch>
      </div>
    );

Нужен ли для этого хеш-роутер? Я не нахожу документы очень ясными:

https://reacttraining.com/react-router/web/api/HashRouter

Answer 1

Компонент Три отображается, потому что это значение по умолчанию, когда нет ни одной точки маршрутизации, соответствующей данному URL.

Вы правы, вы должны использовать HashRouter , предоставляемый пакетом реагирующий маршрутизатор-дом . На основании документации соответствующая конфигурация должна быть примерно такой же, как в вашем случае:

import { HashRouter } from 'react-router-dom';

<HashRouter basename="/" hashType="noslash">
   <App />
</HashRouter>

Тем самым корневой путь изменяется на / # .

Чтобы придерживаться вашего примера:

<div>
   <div>
      // http://localhost:3000/#one
      <Link to="/#one">One</Link> // This can be either /one or /#one
      <Link to="/#two">Two</Link>
   </div>
   <Switch>
      <Route exact path="/one" component={One} />
      <Route exact path="/two" component={Two} />
      <Route component={Three} />
   </Switch>
</div>

К сожалению, путь должен быть таким же, как и раньше.

Документация также содержит пример того, как маршрутизатор создает ссылки href в этой ситуации.