使用 React Router <Redirect /> 不会重定向到任何地方，但是为啥呢？

Posted 2023-02-21

【中文标题】使用 React Router <Redirect /> 不会重定向到任何地方，但是为啥呢？

【英文标题】：Using React Router the <Redirect /> Does not redirect anywhere, but why?使用 React Router <Redirect /> 不会重定向到任何地方，但是为什么呢？

【发布时间】：2021-01-29 21:57:57

【问题描述】：

在 .then() 内部完成注册后，我一直在尝试将用户重定向回“/”或“/home”，但除了重定向之外，promise 中的所有内容都会执行。我只是用 if(true) 来测试它，它确实到了那一点，因为我可以让 console.log 在那里显示文本，但只是 Redirect 是没有结果的..

const createUserWithEmailAndPasswordHandler =(event) => event.preventDefault();

    auth.createUserWithEmailAndPassword(signUp.email, signUp.pw1).then((authData) =>
        console.log("authData" + authData);
        addUserDataToDb(
            email: signUp.email,
            username: signUp.username,
        );
        if (true) 
            return <Redirect to='/home' />;
        
    )
        .catch((error) => 
            setSignUp(
                ...signUp,
                error: error,
            );
            console.error(error);
        );

    setSignUp(INITIAL_STATE);

【参考方案1】：

Redirect 需要渲染才能工作！您可以尝试改用history.push。

【讨论】：

天哪！你帮了我！谢谢！我真的花了很长时间试图弄清楚为什么它没有渲染！对于将来遇到相同问题的其他人，请使用： import useHistory from "react-router-dom";让历史 = useHistory(); const handleRedirect = () => history.push("/") 然后在需要时调用它！谢谢！

【参考方案2】：

你实际做的是返回一个反应组件。如果我没记错的话，你想要实现的是向他发送“/home”，在这种情况下，你将需要使用 Router 组件通过 props 向你的组件提供的历史对象，如果它是Router 组件的直接子组件，如果它不是 Router 组件的直接子组件，则如果您使用的是函数组件，则必须使用钩子；如果您使用的是 Class 组件，则必须使用 HOC。 函数组件示例。

import  useHistory  from "react-router-dom";

function HomeButton() 
  let history = useHistory();

  function handleClick() 
    history.push("/home");
  

  return (
    <button type="button" onClick=handleClick>
      Go home
    </button>
  );



Example for Class component.

  import  withRouter  from "react-router";
  class MyComponent extends React.Component 
onClickHandler()
this.props.history.push('/home')

   render() 
     return <button onClick=onClickHandler>Hello</button>;
   

export default withRouter(MyComponent)