React withRouter 和 class 組件路由器 v6 中訪問的參數

Question

最近我開始了新項目並將它的庫升級到最新的，包括react 。 從 class 組件內的動態路由訪問傳遞的參數時，我遇到了第一個問題。 在過去，為了做到這一點，需要將導出的 class 組件包裝在從路由器返回的withRouter function 中。 在文檔中，他們說此功能已在v6中刪除，如果您需要，可以手動重新創建它docs link 。

我創建了with-router.jsx文件並粘貼了他們的代碼：

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

function withRouter(Component) {
    function ComponentWithRouterProp(props) {
        let location = useLocation();
        let navigate = useNavigate();
        let params = useParams();
        return (
            <Component
                {...props}
                router={{ location, navigate, params }}
            />
        );
    }

    return ComponentWithRouterProp;
}

接下來我將它添加到我的 class 組件中：

import React, { Component } from 'react';
import withRouter from './with-router';

class Product extends Component {
    render() {
        return (
            <div className="product">...</div>
        );
    }
}

export default withRouter(Product);

它不起作用，出現以下錯誤：

Compiled with problems:
WARNING in ./src/components/product.jsx 67:15-25
export 'default' (imported as 'withRouter') was not found in './with-router' (module has no exports)

所以看起來他們自己的代碼不起作用，也許有人知道如何讓它工作？ 另一件事是考慮未來的影響，刪除而不替換的功能，如果你需要它 - 重新創建它？ 如果您無論如何都必須手動添加它，為什么要刪除它，這對最近的反應沒有意義。

• “反應”：“^ 18.2.0”
• “反應-dom”：“^18.2.0”
• “react-router-dom”：“^6.4.4”
• “網絡包”：“^5.74.0”
• “webpack-cli”：“^4.10.0”
• “webpack-dev-server”：“^4.11.1”

Answer 1

正如錯誤指出的那樣，您似乎忽略了使用withRouter HOC導出您的自定義。

編譯時出現問題：WARNING in./src/components/product.jsx 67:15-25 export 'default' * (imported as 'withRouter') was not found in './with-router' ( module has no exports *)

* 重點是我的

假設您已經共享了完整with-router.jsx文件內容，它缺少默認導出。

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

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

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

  return ComponentWithRouterProp;
}

export default withRouter; // <-- add default export!

所以看起來他們自己的代碼不起作用，也許有人知道如何讓它工作？

RRD 代碼得到了很好的維護和測試，我沒有遇到很多關於他們的 React 掛鈎的明顯問題/錯誤。

另一件事是考慮未來的影響，刪除而不替換的功能，如果你需要它 - 重新創建它？ 如果您無論如何都必須手動添加它，為什么要刪除它，這對最近的反應沒有意義。

我認為 React 的發展方向確實有意義。

React 明確表示 Function 組件和 React hooks 是 React 的未來（目前），而 Class 組件出於所有意圖和目的已被棄用，盡管出於兼容性原因保留它們。 您描述為“刪除”的功能，即刪除，被新的 React 掛鈎所取代，如果您將當前的 RRDv6 組件與舊的 React 代碼一起使用，您引用的常見問題解答文檔將作為兼容性橋梁提供。 創建這個 HOC 是微不足道的，如果你需要它，但如果主要目標是創建 React function 組件，那么 RRD 沒有必要或不希望導出他們自己的withRouter HOC 來鼓勵“棄用”的 React 組件編碼模式。

這里一個好的通用規則是在舊的 class 組件上使用新的withRouter組件，對於您創建的任何新組件，將它們實現為 React Function 組件並使用 React hooks。 如果您願意，可以將舊的 class 組件重寫/轉換為 function 組件，但這基本上是“僅當您確實需要/想要時”，而不是“不要只是為了轉換而轉換”類型的東西。