reactjs - RouteComponentProps กับ useHistory

การใช้คอมโพเนนต์ฟังก์ชันของ React และ Typescript จะมีความแตกต่างใดบ้างระหว่างการใช้ hook useHistory กับ RouteComponentProps (react router v5.1)?

ตัวอย่างการใช้ RouteComponentProps :

import { RouteComponentProps } from 'react-router-dom';

interface PropsType extends RouteComponentProps {
    text: string;
}

const MyFunctionalComponent = ({
    text,
    history
    }: PropsType) => {
  
};

ตัวอย่างการใช้ useHistory:

import { useHistory } from 'react-router-dom';

interface PropsType {
    text: string;
}
const MyFunctionalComponent = ({
    text
  }: PropsType) => {
    const history = useHistory();
};

คำตอบ #1

ฉันอยู่ในสถานการณ์เดียวกันพอดี และฉันต้องการแบ่งปันข้อสรุปของฉันกับคุณ

ก่อนอื่น พฤติกรรมของการนำทางเชิงโปรแกรมด้วยทั้งสองวิธีนั้นเหมือนกัน เพราะทั้งคู่ใช้อินสแตนซ์ history เดียวกัน แต่ก็มีความแตกต่างบางประการในวิธีการใช้งาน:

• การใช้สมาชิก history ของ RouteComponentProps บังคับให้คุณต้องส่งมันลงไปตามต้นไม้คอมโพเนนต์ของคุณโดยใช้ props วิธีนี้ไม่มีอะไรผิดปกติ แต่ถ้าต้นไม้คอมโพเนนต์ของคุณโตขึ้น คุณอาจพบว่าตัวเองต้องส่งผ่านหลายชั้นของคอมโพเนนต์

• การใช้ hook useHistory คุณสามารถหลีกเลี่ยงการส่ง prop แบบเดิมๆ และอนุญาตให้คุณใช้ instance ของ history ใน component แบบฟังก์ชันใดก็ได้ โปรดทราบว่า hook นี้เป็นการแก้ไขเฉพาะหน้าสำหรับ hook ในอนาคต และในที่สุดจะถูกแทนที่ด้วย hook useNavigate

โดยส่วนตัวแล้ว ผมพบว่า hook useHistory เป็นวิธีแก้ปัญหาที่สะอาดและอ่านง่ายกว่าสำหรับต้นไม้คอมโพเนนต์ที่ยาว แต่ผมยังคงใช้ instance history ของ RouteComponentProps หากคอมโพเนนต์นั้นอยู่ใกล้หรือเป็นลูกโดยตรงของคอมโพเนนต์ Route.

คำตอบ #2

สำหรับผู้ที่มีปัญหาเกี่ยวกับ useHistory มันถูกแทนที่ใน react-router-dom v6 และตอนนี้คุณควรใช้ useNavigate()

ตัวอย่าง :

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

navigate('/404');

คุณไม่จำเป็นต้องใช้ 'push' แล้ว

ฉันหวังว่าสิ่งนี้จะช่วยได้นะ!