javascript - react-router v5 – 嵌套路由

Question

即使在查看 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 Prop 时，它给了我这个——也许这会有所帮助:

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

Answer 1

除了您指出的声明 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