React - Wrong component rendering after calling history.push

Question

I have a pretty basic app with just a few pages: home, login and dashboard. The goal is for a user to successfully login and be navigated to the dashboard. Currently after I click the login form the url/path update in the browser to /dashboard, but I still see the auth component. I can only see the dashboard component if I do a refresh in the browser. What am I doing wrong?

https://stackblitz.com/edit/react-scqvhp

"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0"

App.js

export default function App() {
  return (
    <Router>
      <div className="App">
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/auth">
              <Auth />
            </Route>
            <Route path="/dashboard">
              <Dashboard />
            </Route>
          </Switch>
      </div>
    </Router>
  );
}

Auth.js

export default function Auth() {
  let match = useRouteMatch();

  return (
    <div className="d-flex align-items-center bg-auth border-top border-top-2 border-primary vh-100">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-md-5 col-xl-4 my-5">
            <p>Auth</p>
            <Router>
              <Route path={`${match.path}/login`}><Login /></Route>
            </Router>
          </div>
        </div>
      </div>
    </div>
  );
};

Login.js

export default function Login() {
  let history = useHistory();

  const submit = (e) => {
    e.preventDefault();

    history.push('/dashboard');
  };

  return (
    <div>
      <form onSubmit={submit}  data-op-form-id="0">
        <div className="form-group">
          <label>Email Address</label>
          <input type="email" className="form-control" placeholder="name@address.com" />
        </div>
        <div className="form-group">
          <div className="row">
            <div className="col">
              <label>Password</label>
            </div>
            <div className="col-auto">
              <a href="#" className="form-text small text-muted">
                Forgot password?
              </a>
            </div>
          </div>
          <div className="input-group input-group-merge">
            <input type="password" className="form-control form-control-appended" placeholder="Enter your password" />
            <div className="input-group-append">
                  <span className="input-group-text">
                    <Eye/>
                  </span>
            </div>
          </div>
        </div>
        <button className="btn btn-lg btn-block btn-primary mb-3">Sign in</button>
        <div className="text-center">
          <small className="text-muted text-center">Don't have an account yet? <a href="#">Sign up</a>.</small>
        </div>
      </form>
    </div>
  );
};

Dashboard.js

export default function Dashboard() {
  return (
    <div>
      <Sidebar/>
      <p>Dashboard</p>
    </div>
  );
};

Answer 1

Remove the nested Router in Auth, it will be conflicting with the URL routing i.e. there is no /dashboard route declared for nested router therefore it renders the Auth view with no child view

export default function Auth() {
  let match = useRouteMatch();

  return (
    <div className="d-flex align-items-center bg-auth border-top border-top-2 border-primary vh-100">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-md-5 col-xl-4 my-5">
            <p>Auth</p>
            <Route path={`${match.path}/login`}><Login /></Route>
          </div>
        </div>
      </div>
    </div>
  );
};

You should only need one instance of Router per app, see the docs on nesting

Answer 2

your routes weren't correctly set. Here's a live demo

  <Router>
    <div className="App">
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route exact path="/auth">
            <Auth />
          </Route>
          <Route exact path="/auth/login">
            <Login />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
    </div>
</Router>

Also remove the router from auth.js

<Router>
   <Route path={`${match.path}/login`}><Login /></Route>
</Router>