response-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 в Dashboard, он дает мнеэто - может быть, это будет полезно:

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