Есть ли какое-то решение, чтобы связать Parent React Router и Child React?

Question

роутер дочернего приложения не работает.

Я собираюсь объединить 4 отдельных приложения реакции в приложение. Поэтому я создаю приложение create-реагировать (родительское приложение) и нахожу 4 реагирующих приложения в src родительского приложения.

App.js в родительском src использует BrowserRouter, которые подключаются к дочернему CRA.

Дочерний CRA также использует маршрутизатор для перехода на соответствующий URL.

app.js в родительском src.

function App() {
return (
  <BrowserRouter>
  <React.Fragment>
    <Switch>
      <Route exact path="/" component={ReactView}/>
      <Route exact path="/app1" component={ChildApp1}/>
      <Route exact path="/app2" component={ChildApp2}/>
      <Route exact path="/app3" component={ChildApp3}/>
      <Route exact path="/account" component={Account}/>
    </Switch>
  </React.Fragment>
</BrowserRouter>)}

ReactView является элементом представления CRA по умолчанию. ChildApp1,2,3, Учетная запись импортируется хорошо.

localhost:3000/ localhost:3000/app1, app2, app3 и /account работает.

ChildApp1, ChildApp2, ChildApp3 и Account имеют BrowserRouter каждый.

localhost:3000/app1/path1 не работает ..

нет сообщений об ошибках и нет элемента в корневом элементе. (Пусто)

Answer 1

Поскольку у вас самый точный реквизит на самом верхнем маршруте, вложенные маршруты не будут совпадать.Решение состоит в том, чтобы просто переключать и упорядочивать маршруты так, чтобы пути маршрутов с префиксом были позже в порядке

function App() {
    return (
      <BrowserRouter>
        <React.Fragment>
            <Switch>
              <Route path="/app1" component={ChildApp1}/>
              <Route path="/app2" component={ChildApp2}/>
              <Route path="/app3" component={ChildApp3}/>
              <Route path="/account" component={Account}/>
              <Route path="/" component={ReactView}/>
            </Switch>
          </React.Fragment>
      </BrowserRouter>
    )
}