用于历史推送的 React Hooks 中等效的构造函数props

IT技术 javascript reactjs
2021-03-25 07:33:10

我正在尝试迁移一个类组件以使用钩子运行，但是在尝试使用我的 history.push 更改 url 时遇到问题。

使用我的类组件，这是更改 url 的方法：

  constructor(props) {

    super(props)

    this.state = {
     // GeneralValidate: false,
      paisValue: '',
      paisError: true,
      loading: false,
      tipo: '',
  };

  }


.//more code here


 this.props.history.push({
  pathname: '/Pais',
  state: { detail: 'hola' }
})

并且工作正常，但在我的函数组件中，props为空，我不知道我如何无法使用 history.push。 

 const PaisForm = (props) => { 
 props.history.push("/Pais")
}

我在做什么错？感谢和抱歉的问题！

3个回答

props.history并且props.location是props由特殊注入的withRouter，它适用于class和functional components

import { withRouter } from 'react-router-dom'    

export const Component = withRouter(({ history, location }) =>{

})

class Comp extends Component {
    render(){
        const { location, history } = this.props
    }
}
export default withRouter(Comp)

第一：

import {withRouter} from "react-router-dom"

并包装您的组件

export default withRouter (PaisForm);

第二：

或者如果父级有权访问历史，则从父级传递历史对象，如下所示：

<PaisForm history={this.props.history}/>

第三：

使用useHistory路由器的钩子

import { useHistory } from 'react-router';

function PaisForm (props){
  const history = useHistory();

  return <button onClick={()=> history.push('/path')}>click</button>
}

修正了错字

react-router-dom v6怎么样？它不再支持 withRouter
2021-05-30 07:33:10

您可以使用withRouter高阶组件包装您的组件，它将history作为props提供：

import { withRouter } from 'react-router-dom';

const Component = ({ history, ...props }) => {

    /* ... */

    history.push('/');

}

withRouter(Component);

或者，您可以使用最新更新 ( v5.1.0)附带的挂钩。有了这些，您不必将功能组件包装在 HOC 中。

可用的钩子有useHistory( historyprop)、useLocation( locationprop)、useParams( prop 的params对象match) 和useRouteMatch( matchprop)。

import { useHistory } from `react-router`;

const Component = (props) => {
    const history = useHistory();

    /* ... */

    history.push('/');
}
其它你可能感兴趣的问题
上一篇使用自定义扩展加载资产不起作用 下一篇试图在react-router中返回“/”？