Question

我遇到问题，我正在使用React Router，我将说明情况。

我有一个登录表单，URL中带有/ authenticate，如果身份验证成功，则转到现在运行良好的“ /”（主页），我有两个导航栏，一个在左侧，另一个位于顶部，现在，当我单击链接时，URL会更改，但是在单击链接时不会呈现组件，但是如果我在浏览器中点击URL，然后单击enter（刷新页面），则组件将正确呈现。

这是我的代码：

这是成功登录后呈现的组件，它是我的主要应用程序，因此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;

这是我的顶级路线组件（react建议的默认组件）：

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保留在最上层的根组件中，但什么也不要！

这是修改：

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;

如果您觉得我需要提供更多代码，请提出要求。

Answer 1

问题是您正在使用两个BrowserRouter组件，请确保该组件已使用一次并且在整个应用程序的大多数顶级组件中都使用

网址正在更改，但组件显示不正确吗？

1 个答案: