Я пытаюсь создать компонент Breadcrumbs с помощью react-router-dom, и у меня есть несколько вопросов
Скажите, что мне дали маршрут, который выглядит следующим образом:
breadcrumbRoutes: [
{
path: '/devicePolicies',
exact: true,
name: "Device Policies",
main: () => <h2>Device Policies View</h2>
},
{
path: '/devicePolicies/controlPanel',
exact: true,
name: "Control Panel",
main: () => <h2>Control Panel View</h2>
},
{
path: '/devicePolicies/controlPanel/settings',
exact: true,
name: "Settings",
main: () => <h2>Settings View</h2>
}
]
В настоящее время мой Breadcrumbs компонент отобразит его следующим образом Device Policies/Control Panel/Settings.Тем не менее, он неправильно отображает правильный компонент, связанный с самым последним путем /devicePolicies/controlPanel/settings.Например, вместо рендеринга компонента settings он рендерит компонент Home.
Breadcrumbs.js
Class Breadcrumbs extend Component
insertBreadcrumbs() {
var routes = this.props.routes;
return (
<div style={{display: 'flex'}}>
<ul className="breadcrumb">
{ this.insertListElement(routes) }
</ul>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</div>
);
}
render() {
return (
<Router>
{ this.insertBreadcrumbs() }
</Router>
);
}
App.js
<Breadcrumbs
name="breadcrumbRoutes"
routes={this.state.breadcrumbRoutes}
onChange={this.handleChange}
/>
Как я могу сделать загруженный вид всегда последним компонентом моего пути?В этом примере я хочу загрузить компонент settings
Ваша помощь очень важна!