Include Redirect component in Gatsby-Link

[connorlindsey]

Summary

When navigating programmatically, Gatsby provides the navigate function which causes build errors when used in the render method (Window is not defined. See issue #10421). The build error message is not very helpful in tracking this mistake down and the documentation doesn't mention this. I was lucky to find a few issues mentioning this and was able to put navigate in a useEffect. There are a couple things I think to improve this:

1. Include a Redirect component in Gatsby-Link. As suggested in the issue above, a user can import Redirect from reach router. Because Gatsby-Link already has this dependency, I think it'd be helpful to be able to just import Redirect from gatsby instead of installing Reach.
2. Make a note about this in the documentation.
3. Somewhat related but could probably be it's own issue: improve the error output on build. Just knowing that window is not defined is a good start, but it'd be helpful to see a stack trace or reference to what code is failing.

Basic example

import { Redirect, navigate } from "gatsby"

// Correct
if (!user) {
   <Redirect to="..." />
}

// Incorrect, but common attempt
if (!user) {
 navigate("/...")
}

Motivation

Redirecting programmatically is common, for example when creating components that redirect if a user isn't logged in.

[blainekasten]

I definitely see the benefit of re-exporting Redirect from gatsby. Especially since we export Link too. Would you be wiling to submit a PR for this?

[connorlindsey]

Yeah, I can do that! I'll update the docs as well.

[connorlindsey]

I imported Redirect from reach in gatsby-link/src/index.js which compiles and adds it to index.js in the root of gatsby-link. Seems to be working as I can import { Redirect } from "gatsby-link" in a test project.

import { Link, Location, Redirect } from "@reach/router"
// ...
export { Redirect }

I'm having trouble exporting from gatsby though. I'm assuming I want to import from gatsby-link and export again from the gatsby-package. It looks like that is being done for the other components/methods in gatsby-link in gatsby/cache-dir/gatsby-browser-entry, but when I try to import and export there, I can't import { Redirect } from "gatsby". Where should I be exporting from? I'm guessing I should also import Redirect from gatsby-link with the rest of the gatsby-link components in index.d.ts in the gatsby package.

I'm running yarn run watch --scope={gatsby,gatsby-link} in my gatsby repo and gatsby-dev in my test repo with the path to gatsby set correctly.

[wardpeet]

@connorlindsey you should indeed export it from gatsby-link and then export it from gatsby.

If you have a PR we can go from there.