title: react: React-router Link not loading a component
body: <p>I have a <code>login page</code> which has a <code>forgot password</code> link and it takes the user to forgot password page.</p>
  
  <p>When I click on the <code>forgot password</code> link, it changes the URL but does not load the component.</p>
  
  <p><strong>Code for login page</strong></p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import { Link } from "react-router-dom";
  
  // assets
  import Logo from "../../../assets/images/kvh-logo.svg";
  import bgImgArray from "../../../assets/images/bg";
  
  import { Button, Form, Input, InputGroup, InputGroupAddon } from "reactstrap";
  
  import "./Login.css";
  
  const Login = (props) =&gt; {
    const [loading, setLoading] = useState(false);
    const userid = useFormInput("");
    const password = useFormInput("");
    const [error, setError] = useState(null);
  
    // for changing backgrounds
    const [index, setIndex] = useState(0);
  
    return (
      &lt;div className="container-fluid backgroundContainer"&gt;
        &lt;div className="Login"&gt;
          &lt;div className="login-form-container"&gt;
            &lt;div className="logo"&gt;
              &lt;img src={Logo} className="App-logo" alt="logo" /&gt;
            &lt;/div&gt;
            &lt;div className="content"&gt;
              &lt;Form className="login-form"&gt;
                &lt;InputGroup&gt;
                  &lt;InputGroupAddon
                    className="input-group-addon"
                    addonType="prepend"
                  &gt;
                    &lt;i className="fa fa-user"&gt;&lt;/i&gt;
                  &lt;/InputGroupAddon&gt;
                  &lt;Input
                    autoFocus
                    type="email"
                    aria-label="Username"
                    aria-describedby="username"
                    aria-invalid="false"
                    placeholder="Username or Email"
                    {...userid}
                  /&gt;
                &lt;/InputGroup&gt;
                &lt;InputGroup&gt;
                  &lt;InputGroupAddon
                    className="input-group-addon"
                    addonType="prepend"
                  &gt;
                    &lt;i className="fa fa-lock"&gt;&lt;/i&gt;
                  &lt;/InputGroupAddon&gt;
                  &lt;Input
                    type="password"
                    placeholder="Password"
                    aria-label="password"
                    aria-describedby="password"
                    {...password}
                  /&gt;
                &lt;/InputGroup&gt;
                &lt;div className="form-actions"&gt;
                  {error &amp;&amp; (
                    &lt;&gt;
                      &lt;small style={{ color: "red" }}&gt;{error}&lt;/small&gt;
                      &lt;br /&gt;
                    &lt;/&gt;
                  )}
                  &lt;br /&gt;
                  &lt;Button
                    className="pull-right"
                    block="true"
                    type="submit"
                    bssize="small"
                    value={loading ? "Loading..." : "Login"}
                    onClick={handleLogin}
                    disabled={loading}
                  &gt;
                    Login
                  &lt;/Button&gt;
                  &lt;br /&gt;
                &lt;/div&gt;
                &lt;div className="forgotPassword"&gt;
                  &lt;Link to="/forgotPassword"&gt;Forgot password?&lt;/Link&gt;
                &lt;/div&gt;
              &lt;/Form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  const useFormInput = (initialValue) =&gt; {
    const [value, setValue] = useState(initialValue);
  
    const handleChange = (e) =&gt; {
      setValue(e.target.value);
    };
    return {
      value,
      onChange: handleChange,
    };
  };
  
  export default Login;
  </code></pre>
  
  <p>In routing code, I have Admin Layout which looks after the dashboard and AuthLayout which looks after the Login page.</p>
  
  <p>I tried searching for the solution but unfortunately couldn't find any solutions. Hence, posting it here.</p>
  
  <p><strong>Router Code</strong></p>
  
  <pre><code>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 = () =&gt; {
    return (
      &lt;Router history={hist}&gt;
        &lt;Switch&gt;
          &lt;Route path="/admin" render={(props) =&gt; &lt;AdminLayout {...props} /&gt;} /&gt;
          &lt;Route path="/" render={(props) =&gt; &lt;AuthLayout {...props} /&gt;} /&gt;
          &lt;Route path="/forgotPassword" component={ResetPassword} /&gt;
          &lt;Redirect from="/" to="/auth" /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  };
  
  export default AppRouter;
  </code></pre>
  
  <p><strong>Adding Auth Layout Code</strong></p>
  
  <pre><code>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) =&gt; {
      return routes.map((prop, key) =&gt; {
        if (prop.collapse) {
          return this.getRoutes(prop.views);
        }
        if (prop.layout === "/auth") {
          return (
            &lt;Route
              path={prop.layout + prop.path}
              component={prop.component}
              key={key}
            /&gt;
          );
        } else {
          return null;
        }
      });
    };
    getActiveRoute = (routes) =&gt; {
      let activeRoute = "WATCH";
      for (let i = 0; i &lt; 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 (
        &lt;div className="wrapper wrapper-full-page" ref="fullPages"&gt;
          &lt;div className="full-page"&gt;
            &lt;Login {...this.props}&gt;&lt;/Login&gt;
            &lt;div className="forgotPassword"&gt;
              &lt;Link to="/forgotPassword"&gt;Forgot password?&lt;/Link&gt;
            &lt;/div&gt;
            &lt;Switch&gt;
              {this.getRoutes(routes)}
              &lt;Redirect from="*" to="/auth/login" /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Pages;
  </code></pre>