Установка baseurl в реактивном маршрутизаторе

Question

У меня проблемы с настройкой маршрутизатора, который учитывает текущий URL. Таким образом, веб-сайт не является полноценной сборкой реагирования, но он инициализирует приложение реагирования на определенном маршруте (http://thesite.com/tv/videos/playlists). Теперь, когда я использую реактивный маршрутизатор, он меняет URL-адрес наhttps://thesite.com/{reactRoute}.

Так что я использовал window.location.pathname

import * as React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
} from 'react-router-dom';
import { createBrowserHistory } from 'history';


import HomeContainer from './containers/HomeContainer';
import PlayListContainer from './containers/PlayListContainer';


const baseUrl = window.location.pathname;
console.log(baseUrl);

const App: React.FC =
  () => {
    const history = createBrowserHistory({ basename: baseUrl });

    return (
      <Router history={history}>
        <div>
          <nav>
            <ul>
              <li>
                <Link to={{pathname: '/'}}>Home</Link>
              </li>
              <li>
                <Link to={`${baseUrl}/playlists`}>Playlist</Link>
              </li>
            </ul>
          </nav>
  
          <Switch>
            <Route path="/">
              <HomeContainer />
            </Route>
            <Route path={`${baseUrl}/playlists`}>
              <PlayListContainer />
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }

export default App;

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

Любая помощь очень ценится.

Answer 1

Если вы добавите <Route exact path="/">на вашем домашнем маршруте в операторе switch все будет в порядке. Точный параметр отключает частичное сопоставление для маршрута и гарантирует, что он возвращает маршрут только в том случае, если путь является ТОЧНЫМ совпадением с текущим URL-адресом. Это объясняется в документации.

Ваш код может выглядеть примерно так:

<Router history={history}>
  <div>
    <nav>
      <ul>
        <li>
          <Link to={{ pathname: "/" }}>Home</Link>
        </li>
        <li>
          <Link to="/playlists">Playlist</Link>
        </li>
      </ul>
    </nav>

    <Switch>
      <Route exact path="/">
        <HomeContainer />
      </Route>
      <Route path="/playlists">
        <PlayListContainer />
      </Route>
    </Switch>
  </div>
</Router>