React-router: Links custom components are not forwarding urls

[robertwt7]

Version

"react-router": "5.1.2",

Hey guys

I followed this from the docs to use custom components for links

const FancyLink = React.forwardRef((props, ref) => (
  <a ref={ref}>💅 {props.children}</a>
))

<Link to="/" component={FancyLink} />

So i'm using styled-components, here's my simple code:

const StyledA = styled.a`
  color: #000 !important;
`;

const BlackLink = React.forwardRef((props, ref) => (
  <StyledA ref={ref}>{props.children}</StyledA>
));

return (
          <Link to="/dashboard/safety" component={BlackLink}>
             Safety
          </Link>
);

It returns a without href thus its not a link.
Should I pass the whole props as well? I'm just following the docs.

Thanks

[robertwt7]

The reason is 1 of the global css in this project is overriding all the a tags to primary colour. Here we need it in different color so...

[robertwt7]

I think looking at the code i realise that i should've passed the {...props} to make it work

var Link = forwardRef(function (_ref2, forwardedRef) {
  var _ref2$component = _ref2.component,
      component = _ref2$component === void 0 ? LinkAnchor : _ref2$component,
      replace = _ref2.replace,
      to = _ref2.to,
      innerRef = _ref2.innerRef,
      rest = _objectWithoutPropertiesLoose(_ref2, ["component", "replace", "to", "innerRef"]);

  return React.createElement(__RouterContext.Consumer, null, function (context) {
    !context ? process.env.NODE_ENV !== "production" ? invariant(false, "You should not use <Link> outside a <Router>") : invariant(false) : void 0;
    var history = context.history;
    var location = normalizeToLocation(resolveToLocation(to, context.location), context.location);
    var href = location ? history.createHref(location) : "";

    var props = _extends({}, rest, {
      href: href,
      navigate: function navigate() {
        var location = resolveToLocation(to, context.location);
        var method = replace ? history.replace : history.push;
        method(location);
      }
    }); // React 15 compat


    if (forwardRefShim !== forwardRef) {
      props.ref = forwardedRef || innerRef;
    } else {
      props.innerRef = innerRef;
    }

    return React.createElement(component, props);
  });
});

[robertwt7]

Okay got it fixed but it keeps refreshing the page. Just realised that I need to preventDefault behavior as stated in the LinkAnchor

Final code for future reference:

const BlackLink = React.forwardRef((props, ref) => {
  const handleClick = (e) => {
    e.preventDefault();
    props.navigate();
  };
  return (
    <StyledA ref={ref} onClick={handleClick} {...props}>
      {props.children}
    </StyledA>
  );
});

I don't think I can submit PR for the docs so.

[Yankovsky]

@robertwt7 great detective work!