我即使在查看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": {}
}
Dashboard
内的Switch
中。 - Rikindashboard/reports
或dashboard/reports/create
,嵌套 Switch 内的第一个路由都会被渲染。 - mdmb