使用react-router-dom

Question

我将我的路由拆分为两个文件。

const masterRoutes=(

                      <Switch>
                      <Route path="/diamond"  component={DiamondMaster}   />
                      <Route path="/gram"     component={GramMaster}      />
                      </Switch>

                    )

export default masterRoutes; 



const userRoutes=(

                      <Switch>
                      <Route path="/user"  component={User}   />
                      <Route path="/store" component={Store} />
                      <Route path="/userlist" component={UserList} />
                      </Switch>

)



export default userRoutes;

app.jsx是处理所有路由的主文件。

export class App extends Component {
  render() {
    return (

          <div>


                  <Router history={history}  >
                      <div>
                      <AuthHeader isLoggedIn={true} />
                      <Route path="/" component={AuthHeader} />                                 
                      <Switch>
                      <Route path="/login" component={Login} />
                      <Route path="/tab" component={SettingsComp} />
                       {userRoutes}
                       {masterRoutes}
                     </Switch>
                      </div>
                  </Router>
            </div>
    );
  }

当我单击user component时，它工作得很好，但MasterRoutes不工作。

App.jsx文件不接受MasterRoutes文件。有没有其他方法来实现这一点？

我对reactjs有点陌生。请容忍我的问题。

Answer 1

发生的情况是第一个Switch语句优先。如果你交换它们，那么master可以工作，而user不能。

我不太确定目标是什么，但是如果你想提取路由列表，你可以这样做：

const masterRoutes=[
  <Route path="/diamond"  component={DiamondMaster}   />
  <Route path="/gram"     component={GramMaster}      />
];

const userRoutes=[
  <Route path="/user"  component={User}   />
  <Route path="/store" component={Store} />
  <Route path="/userlist" component={UserList} />
];

它们不是每个都有自己的Switch，它们只是Route的数组，所以当您将它们添加到已有的Switch标记中时，您只是扩展了路由的数量，将来自userRoutes和masterRoutes的路由包括在内。

您的所有其他代码应该能够保持不变。将它们导出、导入并添加到路由器{masterRoutes} {userRoutes}。

如果您需要子路由，则处理方式会有所不同。