У меня проблема, я использую реагирующий маршрутизатор, и я объясню ситуацию.
У меня есть форма для входа, с / authenticate в URL, если аутентификация успешна, тогда я go на "/" (домашняя страница), которая сейчас работает хорошо, и у меня есть две панели навигации, одна слева, другая сверху, теперь, когда я нажимаю на ссылки, URL-адрес изменяется, но компоненты не отображаются при нажатии на них, но если я коснусь URL-адреса в браузере и нажму клавишу ввода (страница обновлена), компонент отображается правильно.
Вот мой код:
Этот компонент отображается после успешный вход в систему, это мое основное приложение, поэтому MenuGauche и MenuTop всегда отображаются:
import React, { Fragment } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import MenuGauche from "./MenuGauche";
import MenuTop from "./MenuTop";
import Acceuil from "./Acceuil";
import Roles from "./Roles";
const Application = () => {
return (
<Fragment>
<MenuGauche></MenuGauche>
<MenuTop></MenuTop>
<BrowserRouter>
<Switch>
<Route path="/" component={Acceuil}></Route>
<Route path="/roles" component={Roles}></Route>
</Switch>
</BrowserRouter>
</Fragment>
);
};
export default Application;
А вот мой главный компонент маршрута (компонент по умолчанию, предложенный реагировать):
function App(props) {
return (
<ThemeProvider theme={theme}>
<I18nProvider locale={props.language.language}>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Application}></Route>
<Route path="/authenticate" component={Authentification}></Route>
</Switch>
</BrowserRouter>
</I18nProvider>
</ThemeProvider>
);
}
Почему это не работает? Я хотел бы получить любую помощь, чтобы решить это, решение или предложение!
Предлагается одно решение, это то, что BrowserRouter должен оставаться только в верхнем root компоненте, но все равно ничего!
вот модификация:
import React, { Fragment } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import MenuGauche from "./MenuGauche";
import MenuTop from "./MenuTop";
import Acceuil from "./Acceuil";
import Roles from "./Roles";
const Application = () => {
return (
<Fragment>
<MenuGauche></MenuGauche>
<MenuTop></MenuTop>
<Route path="/" component={Acceuil}></Route>
<Route path="/roles" component={Roles}></Route>
</Fragment>
);
};
export default Application;
Если вы считаете, что мне нужно предоставить больше кода, просто спросите его.