React - 调用 history.push 后组件渲染错误

Question

我有一个非常基本的应用程序，只有几页：主页、登录和仪表板。目标是让用户成功登录并导航到仪表板。目前，在我单击登录表单url/path后，浏览器中的更新为/dashboard，但我仍然看到该auth组件。如果我在浏览器中进行刷新，我只能看到仪表板组件。我究竟做错了什么？

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

  );

}

身份验证.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="[e-mail]" />

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

Answer 1

删除嵌套Routerin Auth，它将与 URL 路由冲突，即没有/dashboard为嵌套路由器声明路由，因此它呈现Auth没有子视图的视图export default function Auth() {&nbsp; let match = useRouteMatch();&nbsp; return (&nbsp; &nbsp; <div className="d-flex align-items-center bg-auth border-top border-top-2 border-primary vh-100">&nbsp; &nbsp; &nbsp; <div className="container">&nbsp; &nbsp; &nbsp; &nbsp; <div className="row justify-content-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="col-12 col-md-5 col-xl-4 my-5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Auth</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path={`${match.path}/login`}><Login /></Route>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );};您应该只需要Router每个应用程序的一个实例，请参阅有关嵌套的文档

Answer 2

您的路线设置不正确。这是一个现场演示&nbsp; <Router>&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route exact path="/">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Home />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Route>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route exact path="/auth">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Auth />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Route>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route exact path="/auth/login">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Login />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Route>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path="/dashboard">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Dashboard />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Route>&nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; </div></Router>也从路由器上取下auth.js<Router>&nbsp; &nbsp;<Route path={`${match.path}/login`}><Login /></Route></Router>