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"

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

登录.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 实例，请参阅docs on nesting

Answer 2

您的路线设置不正确。这是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>

另外删除路由器从auth.js

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