Question

子应用程序的路由器不起作用。

我将把4个独立的react应用程序合并到一个应用程序中。因此，我生成了一个create-react-app（父应用），并将4个react应用定位到父应用的src中。

父src中的App.js使用BrowserRouter连接到子CRA。

子级CRA也正在使用路由器移动到相应的网址。

父src中的app.js。

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，Account已正确导入。

localhost:3000/ localhost:3000/app1，app2，app3和/account正在工作。

ChildApp1，ChildApp2，ChildApp3和帐户分别具有BrowserRouter。

localhost:3000/app1/path1不起作用。

没有错误消息，并且根元素中没有元素。（空）

Answer 1

由于您在最顶层的路线上有确切的道具，因此没有嵌套路线会匹配。解决方案是仅使用switch并对路由进行排序，以使前缀路由路径的顺序更高。

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>
    )
}

有没有解决办法可以与父React路由器和子React路由器进行通信？

1 个答案: