react-router v5 –嵌套路由

debugcn 发表于 Dev

安辛克

即使查看SO答案，我也无法弄清楚。我有一个看起来像这样的布局：

const Dashboard = (props) => (
  <div className={styles.views}>
    <Route
      to="/dashboard/reports/create"
      render={() => <ReportsForm {...props} />}
      exact
    />
    <Route
      to="/dashboard/reports"
      render={() => <Reports {...props} />}
      exact
    />
  </div>
);

const routes = [
  { path: '/', component: Home, exact: true },
  { path: '/dashboard', component: Dashboard },
  { path: '/about', component: About, exact: true },
  { path: undefined, component: Error404 },
];

const Routes = () => {
  return (
    <Switch>
      {routes.map((config, i) => {
        const key = `path-${config.path}`;
        return <Route key={key} {...config} />;
      })}
    </Switch>
  );
};
const App = compose(
  withRouter,
  connect(mapStateToProps),
)(() => {
  return (
    <Router history={history}>
      <IntlProvider>
        <Routes />
      </IntlProvider>
    </Router>
  );
})

我有一个仪表板组件，负责呈现多个选项卡，因此转到/dashboard/reports/create仅应渲染该ReportsForm组件，而转到/dashboard/reports仅应渲染该Reports组件。当前，两种情况下都渲染。

我究竟做错了什么？

编辑当我尝试match在仪表盘中打印道具时，它给了我–也许这会有所帮助：

{
  "path": "/dashboard",
  "url": "/dashboard",
  "isExact": false,
  "params": {}
}

里金

除了您指出要声明to而不是path

您可以将Dashboard组件包装Route在Switch

const Dashboard = (props) => (
  <div className={styles.views}>
   <Switch>
    <Route
      path="/dashboard/reports/create"
      render={() => <ReportsForm {...props} />}
      exact
    />
    <Route
      path="/dashboard/reports"
      render={() => <Reports {...props} />}
      exact
    />
   </Switch>
  </div>
);

如果这样不起作用，您甚至可以使用以下初始路径将整个路径包装在Route中：

const Dashboard = props => (
  <div className={styles.views}>
    <Route path="/dashboard/reports">   // <------------------
      <Switch>
        <Route path="/dashboard/reports/create" render={() => <ReportsForm {...props} />} exact />
        <Route path="/dashboard/reports" render={() => <Reports {...props} />} exact />
      </Switch>
    </Route>
  </div>
);

这是我刚刚创建的工作示例解决方案：https : //stackblitz.com/edit/react-uih91e-router-nested?file=index.js

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。