React Router HashRouter: визуализирует компонент для сопоставления URL-адресов с комбинацией location.pathname и хешированного пути - PullRequest
Новая
       90

React Router HashRouter: визуализирует компонент для сопоставления URL-адресов с комбинацией location.pathname и хешированного пути

0 голосов
/ 29 мая 2020

Приложение React, над которым я работаю, состоит из нескольких SPA.

Попытка правильно настроить маршрутизатор Ha sh Маршрутизатор с использованием react-router-dom версии ^5

В самом первом GET URL: 

/app/FirstApp -> Render an app FirstApp
/app/SecondApp -> Render another app SecondApp
/app/ThirdApp -> Render another app ThirdApp

И каждое приложение могут иметь подмаршруты, для которых я использую Ha sh Router:

ie: 

/app/FirstApp/#
/app/FirstApp/#/subrouteA
/app/FirstApp/#/subrouteB


/app/SecondApp/#
/app/SecondApp/#/subrouteP
/app/SecondApp/#/subrouteQ


/app/ThirdApp/#
/app/ThirdApp/#/subrouteX
/app/ThirdApp/#/subrouteY

Я пробовал настроить Ha sh Router для этого, для одного приложения, но я должен отображать компонент для другого приложения, мне нужно сопоставить местоположение. путь

TL; DR: 

/app/FirstApp/#/subrouteA -----> Render MyComponent

/app/SecondApp/#/subrouteP -----> Render YourComponent

Настройка: 

      <HashRouter>
          <Switch>
            <Route path="/subrouteA" component={A} />
            <Route path="/subrouteP" component={B} />
          </Switch>
      </HashRouter>

Вышеупомянутое будет разрешено, только если location.pathname было постоянный.

Для путей ниже я пытаюсь визуализировать другой компонент. Намерение состоит в том, чтобы отобразить разные компоненты для каждого URL-адреса ниже: 

/app/FirstApp/#
/app/SecondApp/#/subrouteA


/myapp/# 
/myapp/#/subrouteP
/myapp/#/subrouteQ

Раньше я использовал маршрутизатор браузера, но, к сожалению, есть сценарий ios рендеринга на стороне сервера в нашем приложении, для которого мы должны перейти на Ha sh Маршрутизатор. Предыдущая реализация, удовлетворяющая базовому имени и суб-маршрутам: 

      <BrowserRouter basename={basename}>
          <Switch>
            <Route path="/FirstApp" component={A} />
            <Route path="/SecondApp" component={B} />
            <Route path="/ThirdApp" component={C} />
          </Switch>
      </BrowserRouter>

basename может быть либо /app, либо другой базой, например /noapp.

Итак, для настроенных на стороне сервера путей, то есть при GET, будет получено ожидаемое: 

/app/FirstApp ----> A
/noapp/SecondApp ----> B

Оцените, есть ли какие-либо мысли по этому поводу. Спасибо!

...