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"应用程序.jsexport 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>  );}身份验证.jsexport 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>  );};登录.jsexport 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() {

  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>