reactjs - 在 'withRouter' 中找不到导出 'withRouter'(导入为 'react-router-dom')

Question

我完全是 React 的初学者，在练习时遇到了这个问题。
通过搜索，我发现'react-router-dom v6'不再支持'withRouter'。但我不知道如何将我的代码更改为与 v6 兼容。
有谁知道如何更改此代码而不是使用“withRouter”？
提前致谢!

    import React, { useEffect } from 'react';
    import { useDispatch, useSelector } from 'react-redux';
    import { withRouter } from 'react-router-dom';
    import { readPost, unloadPost } from '../../modules/post';
    import PostViewer from '../../components/post/PostViewer';
    
    const PostViewerContainer = ({ match }) => {
      // 처음 마운트될 때 포스트 읽기 API요청
      const { postId } = match.params;
      const dispatch = useDispatch();
      const { post, error, loading } = useSelector(({ post, loading }) => ({
        post: post.post,
        error: post.error,
        loading: loading['post/READ_POST']
     }));
    
    useEffect(() => {
      dispatch(readPost(postId));
      // 언마운트될 때 리덕스에서 포스트 데이터 없애기
      return () => {
        dispatch(unloadPost());
      };
    }, [dispatch, postId]);
    
      return <PostViewer post={post} loading={loading} error={error} />;
    };
    
    export default withRouter(PostViewerContainer);

enter image description here

Answer 1

没错，withRouter 高阶组件 (HOC) 在 react-router-dom@6 中被移除。

因为PostViewerContainer是一个函数组件，直接使用React hooks就可以了。 withRouter HOC 真的没有必要。在这种情况下，它是 useParams您需要导入和使用的钩子(Hook)。

例子:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom'; // <-- import useParams hook
import { readPost, unloadPost } from '../../modules/post';
import PostViewer from '../../components/post/PostViewer';

const PostViewerContainer = () => { // <-- remove match prop
  // 처음 마운트될 때 포스트 읽기 API요청
  const { postId } = useParams(); // <-- call hook and destructure param

  const dispatch = useDispatch();

  const { post, error, loading } = useSelector(({ post, loading }) => ({
    post: post.post,
    error: post.error,
    loading: loading['post/READ_POST']
  }));

  useEffect(() => {
    dispatch(readPost(postId));
    // 언마운트될 때 리덕스에서 포스트 데이터 없애기
    return () => {
      dispatch(unloadPost());
    };
  }, [dispatch, postId]);

  return <PostViewer post={post} loading={loading} error={error} />;
};

作为引用，如果您仍需要对基于类的组件使用 HOC，则需要将它们转换为函数组件或创建自定义 withRouter HOC。

例子:

import { useLocation, useNavigate, useParams } from 'react-router-dom';

const withRouter = Component => props => {
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams();

  return (
    <Component
      {...props}
      location={location}
      navigate={navigate}
      params={params}
    />
  );
};

export default withRouter;