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

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

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

Answer 2

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

React - 调用 history.push 后组件呈现错误

React - Wrong component rendering after calling history.push

javascript

reactjs

react-router

react-router-v4