Reactjs react：react路由器链路未加载组件

我有一个登录页面，其中有一个忘记密码链接，它需要用户忘记密码页面

当我单击忘记密码链接时，它会更改URL，但不会加载组件

登录页面代码

在路由代码中，我有管理布局，它负责仪表板，AuthLayout负责登录页面

我试图寻找解决方案，但不幸的是找不到任何解决方案。因此，在这里发布它

路由器代码

添加身份验证布局代码

如果您创建自己的历史记录，那么您应该使用路由器而不是BrowserRouter

---

因为BrowserRouter有自己的历史记录，而您提供了另一个历史记录，这就导致了问题。

如下所示在路由器内部进行包装

import {
 BrowserRouter as Router,
} from "react-router-dom";

<Router><Link to="/forgotPassword">Forgot password?</Link> <Router/>

---

请看您编写的代码：

} /> 它永远不会放弃密码，因为路径总是与第一条路径匹配。 你应该使用准确的道具：

} />

---

如何呈现您的登录组件？来自AuthLayout。所以，您可以使用其中的链接。然后，我把我的2美分用正确的路由器。同样的问题，用错了，我试过了。同样的问题。我还添加了AuthLayout的代码，供您参考。

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";

import { createBrowserHistory } from "history";

import AdminLayout from "layouts/Admin/Admin.js";
import AuthLayout from "layouts/Auth/Auth.js";
import ResetPassword from "../components/pages/reset-password/ResetPassword";

const hist = createBrowserHistory();

const AppRouter = () => {
  return (
    <Router history={hist}>
      <Switch>
        <Route path="/admin" render={(props) => <AdminLayout {...props} />} />
        <Route path="/" render={(props) => <AuthLayout {...props} />} />
        <Route path="/forgotPassword" component={ResetPassword} />
        <Redirect from="/" to="/auth" />
      </Switch>
    </Router>
  );
};

export default AppRouter;

import React from "react";
import { Route, Switch, Redirect, Link } from "react-router-dom";

import Login from "../../components/pages/login/Login";
import ResetPassword from "../../components/pages/reset-password/ResetPassword";


import routes from "routes/routes.js";

class Pages extends React.Component {
  getRoutes = (routes) => {
    return routes.map((prop, key) => {
      if (prop.collapse) {
        return this.getRoutes(prop.views);
      }
      if (prop.layout === "/auth") {
        return (
          <Route
            path={prop.layout + prop.path}
            component={prop.component}
            key={key}
          />
        );
      } else {
        return null;
      }
    });
  };
  getActiveRoute = (routes) => {
    let activeRoute = "WATCH";
    for (let i = 0; i < routes.length; i++) {
      if (routes[i].collapse) {
        let collapseActiveRoute = this.getActiveRoute(routes[i].views);
        if (collapseActiveRoute !== activeRoute) {
          return collapseActiveRoute;
        }
      } else {
        if (
          window.location.pathname.indexOf(
            routes[i].layout + routes[i].path
          ) !== -1
        ) {
          return routes[i].name;
        }
      }
    }
    return activeRoute;
  };

  componentDidMount() {
    document.documentElement.classList.remove("nav-open");
  }
  render() {
    return (
      <div className="wrapper wrapper-full-page" ref="fullPages">
        <div className="full-page">
          <Login {...this.props}></Login>
          <div className="forgotPassword">
            <Link to="/forgotPassword">Forgot password?</Link>
          </div>
          <Switch>
            {this.getRoutes(routes)}
            <Redirect from="*" to="/auth/login" />
          </Switch>
        </div>
      </div>
    );
  }
}

export default Pages;

import {
  Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";

import {
 BrowserRouter as Router,
} from "react-router-dom";

<Router><Link to="/forgotPassword">Forgot password?</Link> <Router/>