javascript 如何在React v6中使用this.props.history.push

gudnpqoy  于 2023-06-28  发布在  Java
关注(0)|答案(3)|浏览(196)

这是Alex,我是react的新手,当我从视频中学习时,他没有使用react v6,所以我输入this.props.history.push('/add-employee');不行的。有人能帮我在react v6 code中导航吗?谢谢!

tv6aics1

tv6aics11#

如果您仍然想使用react-router-dom v6(请参阅答案末尾的建议),可以使用useNavigate钩子来实现这一点

  1. import { useNavigate } from 'react-router-dom'

然后在你的功能组件中代替this.props.history.push('/add-employee');

  1. //inside the function at the top
  2. const navigate = useNavigate();
  3. // use this in replace of 'this.props.history.push('/add-employee');'
  4. navigate('/add-employee');

一些与您正在学习的教程相关的建议

  • 安装教程中使用的相同依赖项
  • 或遵循另一个教程,是更及时
nkkqxpd9

nkkqxpd92#

使用函数组件更容易,可以调用useNavigate钩子。
然后,导航到新路线可以这样完成:

  1. import { useNavigate } from 'react-router-dom';
  2. function MyComponent() {
  3. const navigate = useNavigate();
  4. function addEmployee() {
  5. navigate('/add-employee');
  6. }
  7. // return some JSX...
  8. }

要使其与类组件一起工作,您需要创建一个函数组件 Package 器。

  1. const withNavigate = Comp => props => <Comp {...props} navigate={useNavigate()} />;
  2. class MyClassComponent extends React.Component {
  3. addEmployee = () => this.props.navigate('/add-employee');
  4. // ...
  5. }
  6. const MyComponent = withNavigate(MyClassComponent);
  7. // now only use MyComponent instead of the class component
  8. export default MyComponent;
展开查看全部
krcsximq

krcsximq3#

useNavigate钩子可以解决您的问题。

验证码:

  1. import { useNavigate } from 'react-router-dom';
  2. const MyComponent =()=> {
  3. const navigate = useNavigate();
  4. const addEmp=()=> (
  5. navigate('/add-employee');
  6. )
  7. // return jsx
  8. }

相关问题