Issues using <Link />

[Jared Loson]

Hi, I'm trying to add a Link, but I'm getting two Warnings whenever a Link is rendered on the page.

Warning: Failed context type: The context `redirectTo` is marked as required in `Link`, but its value is `undefined`.
Warning: Failed context type: The context `location` is marked as required in `Link`, but its value is `undefined`.

In addition, I get an error upon clicking a Link.

Uncaught TypeError: this.context.redirectTo is not a function

Any idea on a workaround for this?

[Jared Grippe]

This would happen if you rendered a <Link /> component without a parent <Router>… component. The Router component uses React Context to provide redirectTo and location to any Link components rendered down the tree.

Are you trying to put links next to or above your router? Maybe in a navbar? If so instead of doing this:

<div>
  <header>
    <Link href="/about">About</Link>
  </header>
  <Router />
  <Footer />
</div>

Move your router to the top of your tree and render your layout (header and footer) in a <Layout> component.

[Jared Loson]

Ah yes, that makes sense. I'll give this a try later today. Thanks!

[Jared Loson]

Yup, it's working after moving instances of <Link> inside the Router.