Как сделать вложенность в url при переключении select используя React?
Подскажите пожалуйста, как сделать правильно вложенность в url при переключении селектов? Использую я React. У меня есть файл, в котором описаны роуты:
const routes = [
{
id: 1,
path: "/",
component: HomeContentPage,
},
{
id: 2,
path: "/group/:id",
component: GroupContentPage,
},
{
id: 3,
path: "/group/:id/device/:id",
component: DeviceContentPage,
},
{
id: 4,
path: "*",
component: ErrorContentPage,
},
];
export default routes;
В рутовом index.js описаны переключения:
const app = (
<Router>
<Provider store={store}>
<App>
<Switch>
{routes.map((route) => (
<Route
exact
key={route.id}
path={route.path}
component={route.component}
/>
))}
</Switch>
</App>
</Provider>
</Router>
);
ReactDOM.render(app, document.getElementById("root"));
На странице находится основной селект с группами:
при выборе какой-то группы, появляется новый селект с подгруппами ранее выбранной группы:
Необходимо менять урл при переключении селектов(должна быть вложенность group/{id}/device{id}. На изменение селектов у меня есть onChange:
onChangeOptionsHandler(option) {
const { history } = this.props;
if (option.level === "group") {
history.push(`/group/${option.id}`);
this.setState((prevState) => ({
selectedRules: {
...prevState.selectedRules,
group: option.id,
subGroup: "",
},
}));
}
if (option.level === "subGroup") {
history.push(`/device/${option.id}`);
this.setState((prevState) => ({
selectedRules: { ...prevState.selectedRules, subGroup: option.id },
}));
}
}
Не знаю, как сделать вложенность правильно. В моей "реализации" вложенность не работает, когда я делаю history.push("/device/${option.id}") мне как-то нужно вставить перед девайсами /group/id. подскажите пожалуйста. может быть я с самого начала начал делать все не так?! :)
Заранее спасибо.

