Reactjs React js重定向不会重定向到新url

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

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

对于重定向，我正在使用

react router dom

中的

Redirect

组件，但它似乎对我不起作用。如果我使用

props.history.push（）

，它就会工作

我想澄清一下

• 在什么情况下

  重定向

  有效
• 我应该在何时使用

  重定向

  以及何时使用

  props.history.push（）

这是我的代码沙盒演示

---

重定向

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

如果您希望重定向或更改事件处理程序内部的路由，则需要使用

history.push

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

export const LandingPage=props=>{
返回(
登录页
{
身份验证登录（（）=>{
道具.历史记录.推送（“/app”）
});
}}
>
登录
);
};

在更新状态时可以使用重定向，并且基于状态的存在，可以呈现重定向组件，如

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

返回日志数据&&

欢迎来到react js！，似乎您正在尝试加载

重定向

，好像它是一个函数，但它不是一个函数！它是一个

反应组件

！！有关react组件的更多信息：或

当您想要更改网站方向（正如您试图更改方向）但必须将其作为一个组件使用时，重定向是有效的

当您在组件的一个子组件中使用历史记录时，您应该使用

props.history.push（）

，但两者的工作方式相似，正如您所看到的，很难定义何时使用它，因为它们做的事情相似，有些人并不关心，但是如果您想了解更多，请查看此帖子

关于您的代码，请注意您在react中使用的版本，因为在

react 16.8

中，有一个功能可以使用react挂钩并将功能组件用作react组件，这非常有趣，在您的情况下，您无法使用

React.memo来控制元素的状态，但我更喜欢使用
React组件
。在这种情况下，您可以使用如下内容：

您的登录页.js
import auth from "./auth";
import { Redirect } from "react-router-dom";

export class LandingPage extends Component {
    constructor(props){
      super(props);
      this.state = {
        authenticated: false
      };
    }

    render(){

    return (
      <div>
        {this.state.authenticated ? (<Redirect to="/app" />) : null}
        <h1>Landing Page</h1>
        <button
          onClick={() => {
            return this.setState({ authenticated: auth.login()})
          }}
        >
          Login
        </button>
      </div>
      );
    }
}


class Auth {
  constructor() {
    this.authenticated = false;
  }

  login() {
    return this.authenticated = true;
  }

  logout() {
    return this.authenticated = false;
  }

  isAuthenticated() {
    return this.authenticated;
  }
}

export default new Auth();