CODEWITHSUNDEEP
reactjsreact-router-dom
pmiranda
pmiranda

Reputation: 8420

React, Invalid value for prop `component` in Link

I have read another questions about this but in my situation I don't know how to handle it. I got this warning:

Warning: Invalid value for prop component on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

<Link component={MyLink} to='/summary-upload-tco'>
  <Button>asdas</Button>}
</Link>

and

const MyLink = props => <Link to={props.to} {...props} />;

Is there a way then to pass the props component to with that MyLink defined as it is?

Upvotes: 2

Views: 2365

Answers (1)

Sagiv b.g
Sagiv b.g

Reputation: 31024

The Link component doesn't accept a component props. If you want to create your own custom Link you can just wrap it and use the useRouteMatch hook as a helper:

Example taken from react-router's DOCS

// This example show how you could create a custom
// <Link> that renders something special when the URL
// is the same as the one the <Link> points to.

export default function CustomLinkExample() {
  return (
    <Router>
      <div>
        <OldSchoolMenuLink
          activeOnlyWhenExact={true}
          to="/"
          label="Home"
        />
        <OldSchoolMenuLink to="/about" label="About" />

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function OldSchoolMenuLink({ label, to, activeOnlyWhenExact }) {
  let match = useRouteMatch({
    path: to,
    exact: activeOnlyWhenExact
  });

  return (
    <div className={match ? "active" : ""}>
      {match && "> "}
      <Link to={to}>{label}</Link>
    </div>
  );
}

Upvotes: 1

Related Questions