reactjs - React js 重定向不会重定向到新的 url

Question

我是 React js 的新手，并开始在我的实践项目之一中实现。

当用户登录时我想要什么它应该被重定向到另一个将呈现另一个组件的路由。

对于重定向，我使用 Redirect组件来自 react-router-dom但它似乎对我不起作用。如果我使用 props.history.push()那么它的工作原理。

我想清楚

在什么情况下Redirect作品？

我应该什么时候使用 Redirect当 props.history.push() ?

这是我的代码沙盒演示。

https://codesandbox.io/embed/react-protected-routes-n587m?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Redirect组件需要渲染才能生效，并且事件处理程序的返回值不会渲染或通常不会被使用

如果您希望在事件处理程序中重定向或更改路由，您需要使用 history.push

export const LandingPage = props => {
  return (
    <div>
      <h1>Landing Page</h1>
      <button
        onClick={() => {
          auth.login(() => {
             props.history.push("/app")
          });
        }}
      >
        Login
      </button>
    </div>
  );
};

当您更新状态时可以使用重定向，并且基于状态的存在，您可以像这样渲染重定向组件

return loggedIn && <Redirect to="/app" />