时间戳

首页 > 解决方案 > 是否有任何解决方案可以通信父 React 路由器和子 React 路由器？

reactjs - 是否有任何解决方案可以通信父 React 路由器和子 React 路由器？

问题描述

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

我打算将 4 个独立的 react 应用程序组合成一个应用程序。所以我生成了一个 create-react-app(parent app) 并将 4 个 react 应用程序定位到父应用程序的 src 中。

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

子 CRA 也在使用路由器移动到适当的 url。

父 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,账号导入好。

localhost:3000/ localhost:3000/app1, app2,app3并且/account正在工作。

ChildApp1、ChildApp2、ChildApp3 和 AccountBrowserRouter各有。

localhost:3000/app1/path1不工作..

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

标签： reactjsreact-router

解决方案

由于您在最顶层路线上有一个确切的道具，因此没有嵌套路线匹配。解决方案是仅使用 switch 和 order 路由，以便前缀路由路径在 order 中

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

推荐阅读