При чем тут роутер и реквизит в маршрутах?

Question

Я довольно новичок в React и пытаюсь понять, что делает компонент, который я пытаюсь использовать в проекте.

Раньше я использовал useHistory из реагирующего маршрутизатора, но это выглядит совсем иначе. И также кажется, что реквизит используется. Здесь есть кто-то, кто понимает и может объяснить, что делает этот компонент. А что делает withRouter и если он такой же, как useHistory?

Спасибо!

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

const LinkButton = (props) => {
  const {
    history,
    location,
    match,
    staticContext,
    to,
    onClick,
    // ⬆ filtering out props that `button` doesn’t know what to do with.
    ...rest
  } = props
  return (
    <button
      {...rest} // `children` is just another prop!
      onClick={(event) => {
        onClick && onClick(event)
        history.push(to)
      }}
    />
  )
}

LinkButton.propTypes = {
  to: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired
}

export default withRouter(LinkButton)

Answer 1

withRouter - это компонент высшего порядка (HO C) для ввода реквизитов маршрутизатора (match, location, history) в упакованный компонент, LinkButton.

Под капотом используется RouterContext для заполнения match, location, history на завернутый компонент.

function withRouter(Component) {
  const C = props => {
    const { wrappedComponentRef, ...remainingProps } = props;

    return (
      <RouterContext.Consumer>
        {context => {
          return (
            <Component
              {...remainingProps}
              {...context} // pass context (match, location, history)
              ref={wrappedComponentRef}
            />
          );
        }}
      </RouterContext.Consumer>
    );
  };
}

В то время как useHistory это просто custom hook в маршрутизаторе реагирования для использования только history информация в компоненте function .