React - 調用history.push后錯誤的組件渲染

Question

我有一個非常基本的應用程序，只有幾個頁面：主頁、登錄和儀表板。 目標是讓用戶成功登錄並導航到儀表板。 目前，在我單擊登錄表單后，瀏覽器中的url/path更新為/dashboard ，但我仍然看到auth組件。 如果我在瀏覽器中進行刷新，我只能看到儀表板組件。 我究竟做錯了什么？

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"

應用程序.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>
  );
};

登錄.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>
  );
};

儀表板.js

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

Answer 1

刪除Auth中的嵌套Router ，它將與 URL 路由沖突，即沒有為嵌套路由器聲明/dashboard路由，因此它呈現沒有子視圖的Auth視圖

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>
  );
};

每個應用程序只需要一個Router實例，請參閱有關嵌套的文檔

Answer 2

您的路線設置不正確。 這是一個現場演示

  <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>

同時從auth.js中刪除路由器

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