时间戳

首页 > 解决方案 > url 正在更改，但组件未正确呈现？

reactjs - url 正在更改，但组件未正确呈现？

问题描述

我有一个问题，我正在使用反应路由器，我会解释情况。

我有一个要登录的表单，在 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;

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

标签： reactjsroutingreact-router-dom

解决方案

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

推荐阅读