React-Router V5 - 嵌套路由

Question

我即使在查看Stack Overflow的答案后仍然无法理解。我有一个如下所示的布局：

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": {}
}

- mdmb

---

将其包装在 Dashboard 内的 Switch 中。 - Rikin

你尝试过移除包裹路由的 DIV 吗？ - Celso Wellington

@Rikin 你是指嵌套开关吗？我以为这不可能 - 马上尝试。 - mdmb

是的，因为您要为仪表板设置路由，所以新的 Switch 将在 Route 中 > 它会呈现 Dashboard 然后是 Switch > Route / Route。 - Rikin

@Rikin 这给我带来了奇怪的结果 - 无论我放置 dashboard/reports 或 dashboard/reports/create，嵌套 Switch 内的第一个路由都会被渲染。 - mdmb

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

如果那不起作用，您甚至可以使用以下初始路径将整个内容包装在路由中：

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

- Rikin

---

这给我带来了奇怪的结果 - 无论我输入 dashboard/reports 还是 dashboard/reports/create，嵌套的 Switch 中的第一个路由都会被渲染。将 Switch 包装在 Route 中也没有帮助 :( - mdmb

我发布了第二个示例，请看看是否解决了您的问题。 - Rikin

让我在 StackBlitz 上为您处理示例。显然，这就是我在我的代码库中设置的方式，一切似乎都没有问题。 - Rikin

@Ancinek 啊，原来是笔误，我没有注意到。我已经在我的回答中更正了这个错误，并附上了一个可行的例子链接。如果有帮助，请给个赞或接受回答，谢谢！ - Rikin

是的，正如你建议的嵌套开关语句确实帮了我，这正是我所需要的！非常感谢！ - mdmb