Remove defaultProps from all the components

[raffaeler]

Apparently react is going to deprecate defaultProps in favor od JS default parameters: https://react.dev/learn/passing-props-to-a-component#specifying-a-default-value-for-a-prop

This is what I am seeing now with version 2.10.2:

LinkContainer: Support for defaultProps will be removed from function components in a future major release.
Use JavaScript default parameters instead.

I logged this as I didn't find any related issue. HTH

[hcrufio88]

same problem here.

[Anonyfox]

Quick solution for anyone waiting for an update, drop this standalone component into your project and use it instead (works with typescript/react18):

import React, { ReactElement, CSSProperties, MouseEvent } from 'react';
import { useHref, useLocation, useMatch, useNavigate } from 'react-router-dom';

interface LinkContainerProps {
  children: ReactElement;
  onClick?: (event: MouseEvent) => void;
  replace?: boolean;
  to: string | { pathname: string };
  state?: object;
  activeClassName?: string;
  className?: string;
  activeStyle?: CSSProperties;
  style?: CSSProperties;
  isActive?: ((match: any, location: any) => boolean) | boolean;
}

const isModifiedEvent = (event: MouseEvent) =>
  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);

export const LinkContainer: React.FC<LinkContainerProps> = ({
  children,
  onClick,
  replace = false,
  to,
  state,
  activeClassName = 'active',
  className,
  activeStyle,
  style,
  isActive: getIsActive,
  ...props
}) => {
  const path = typeof to === 'object' ? to.pathname || '' : to;
  const navigate = useNavigate();
  const href = useHref(typeof to === 'string' ? { pathname: to } : to);
  const match = useMatch(path);
  const location = useLocation();
  const child = React.Children.only(children);

  const isActive = !!(getIsActive
    ? typeof getIsActive === 'function'
      ? getIsActive(match, location)
      : getIsActive
    : match);

  const handleClick = (event: MouseEvent) => {
    if (children.props.onClick) {
      children.props.onClick(event);
    }

    if (onClick) {
      onClick(event);
    }

    if (
      !event.defaultPrevented && // onClick prevented default
      event.button === 0 && // ignore right clicks
      !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {
      event.preventDefault();

      navigate(to, {
        replace,
        state,
      });
    }
  };

  return React.cloneElement(child, {
    ...props,
    className: [
      className,
      child.props.className,
      isActive ? activeClassName : null,
    ]
      .join(' ')
      .trim(),
    style: isActive ? { ...style, ...activeStyle } : style,
    href,
    onClick: handleClick,
  });
};

[raffaeler]

@Anonyfox If I understand correctly, this should be done for all the components which looks like a huge overkill.

[reinard]

I was able to reproduce this issue with react & react-dom set to version 18.2.0.

This simple PR resolves the issue: https://github.com/react-bootstrap/react-router-bootstrap/pull/318

[raffaeler]

Any forecast on the publishing date? I see the last published release from 2y ago.

[kyletsang]

This is published now