如何在 Class 组件中使用 useNavigate() React-Router-Dom Hook

Question

如何在 Class 组件中使用 useNavigate() React-Router-Dom Hook？

export default class MovieForm extends Form {
  state = {
    data : {},
    error : {},
  }
  onSubmit(){
    // Navigate to Another Component
  }
  render(){
  // rendering the Form UI
  }
}

我想在提交表单时导航到另一个组件。

官方 React-Router-Dom 文档说我只能在功能组件内使用 'useNavigate( )' Hook。

我有一个 class 组件，但我无法使其成为功能组件。 因为它扩展了表格 Class 并且我想要此 MovieForm 组件中表格 Class 的所有功能。

那么如何导航到另一个组件。

Answer 1

如果你想使用useNavigate钩子，那么你基本上有两种选择。

1. 将基于类的组件转换为 React function 组件并使用useNavigate挂钩。
2. 创建一个自定义的withRouter高阶组件，因为react-router-dom@6不再导出一个。

我不会介绍转换案例。 这是一个withRouter HOC 实现。

例子：

import { useNavigate, /* other hooks */ } from 'react-router-dom'; 

const withRouter = WrappedComponent => props => {
  const navigate = useNavigate();
  // other hooks

  return (
    <WrappedComponent
      {...props}
      {...{ navigate, /* other hooks */ }}
    />
  );
};

export default withRouter;

现在您导入withRouter并装饰 class 组件，以便将navigate和任何其他 RRD 挂钩值作为道具注入。

...
import withRouter from '../path/to/withRouter';

class MovieForm extends React.Component { // *
  state = {
    data : {},
    error : {},
  }

  onSubmit() {
    const { navigate } = this.props;
    // Navigate to Another Component
    navigate("...target path...");
  }

  render() {
    // rendering the Form UI
  }
}

export default withRouter(MovieForm);

* React 组件应该只扩展React.Component ，而不是其他自定义 Javascript 类！ 参见组成与 Inheritance

Answer 2

从 React 路由器 v6 开始，您可以使用Navigate组件。

export default class MovieForm extends Form {
  state = {
    data : {},
    error : {},
    submitted : false,
  }
  onSubmit(){
    // Navigate to Another Component
    this.setState({submitted: true});
  }
  render(){
      // rendering the Form UI
      {submitted && 
        <Navigate to={// Router path to the target component} 
                  state={// you can pass state/props here}
        />
      }
  }
}