在 'react-router-dom' 中找不到导出 'withRouter'（导入为 'withRouter'）

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 挂钩。

示例：

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} />;
};

作为参考，如果您仍然需要为基于 class 的组件使用 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;

在 'react-router-dom' 中找不到导出 'withRouter'（导入为 'withRouter'）

export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom'

reactjs

react-router-dom