时间戳

首页 > 解决方案 > React js重定向不会重定向到新的url

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

问题描述

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

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

对于重定向，我使用的是Redirect组件，react-router-dom但它似乎对我不起作用。如果我使用props.history.push()它，它会起作用。

我要清楚

这是我的代码沙盒演示。

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

标签： reactjsreact-router

解决方案

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

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

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

更新状态时可以使用重定向，并且根据状态的存在，您可以呈现 Redirect 组件，如

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

推荐阅读