Replace react-router with @reach/router #6918

KyleAMathews · 2018-08-01T00:38:01Z

fixes #5656

Smaller package + better accessibility + simplified APIs 👍

https://reach.tech/router/

TODO

remove console.log
fix conflicts
fix gatsby-link typescript typings
create issue for hash scrolling handling
for removed APIs, investigate why they were added
Update gatsby-link tests

Upgrade sites

store.gatsbyjs.org
client-only-routes
simple-auth

Document

gatsby-link

Breaking changes to document

change client paths to use splats
note that can't use relative paths Add support for relative links with @reach/router #6945
don't support object form of to any longer. Add search/hash yourself. Add state to state prop.
change Route components to Router w/ normal components with path prop
on gatsby-link, now only support activeClass / activeStyle props. If want more control, you can use getProps prop
route apis don't get action anymore
Migrating removed browser APIs

KyleAMathews · 2018-08-01T00:41:21Z

Deploy preview for using-postcss-sass failed.

Built with commit 06d9c77

https://app.netlify.com/sites/using-postcss-sass/deploys/5b682dae73f2cf4f594f7750

KyleAMathews · 2018-08-01T00:42:44Z

Deploy preview for using-glamor failed.

Built with commit 06d9c77

https://app.netlify.com/sites/using-glamor/deploys/5b682daf73f2cf4f594f7759

KyleAMathews · 2018-08-01T00:43:13Z

Deploy preview for using-contentful failed.

Built with commit 06d9c77

https://app.netlify.com/sites/using-contentful/deploys/5b682db073f2cf4f594f775f

KyleAMathews · 2018-08-01T00:43:22Z

Deploy preview for using-jss failed.

Built with commit 06d9c77

https://app.netlify.com/sites/using-jss/deploys/5b682db373f2cf4f594f7777

gatsbybot · 2018-08-01T00:44:13Z

Deploy preview for using-drupal failed.

Built with commit 06d9c77

https://app.netlify.com/sites/using-drupal/deploys/5b682dae73f2cf4f594f774a

KyleAMathews · 2018-08-01T00:44:54Z

Deploy preview for gatsbygram failed.

Built with commit 06d9c77

https://app.netlify.com/sites/gatsbygram/deploys/5b682dae73f2cf4f594f7747

KyleAMathews · 2018-08-01T00:46:42Z

Deploy preview for using-remark failed.

Built with commit 06d9c77

https://app.netlify.com/sites/using-remark/deploys/5b682db073f2cf4f594f7762

KyleAMathews · 2018-08-01T01:19:07Z

Deploy preview for gatsbyjs failed.

Built with commit 06d9c77

https://app.netlify.com/sites/gatsbyjs/deploys/5b682dae73f2cf4f594f7744

KyleAMathews · 2018-08-02T15:35:47Z

I'm doing an overview call on this in 10 minutes if you'd like to join! https://zoom.us/j/100692813

KyleAMathews · 2018-08-02T16:02:30Z

packages/gatsby-link/src/index.js

              }
            }

            // Make sure the necessary scripts and data are
            // loaded before continuing.
-            e.preventDefault()
-            window.___push(this.state.to)
+            if (process.env.NODE_ENV === `production`) {


Remove production check

KyleAMathews · 2018-08-02T16:11:56Z

packages/gatsby/cache-dir/production-app.js


+setApiRunnerForLoader(apiRunner)


KyleAMathews · 2018-08-03T01:18:50Z

Deploy preview for using-styled-components failed.

Built with commit bc7035c

https://app.netlify.com/sites/using-styled-components/deploys/5b682bab792f8943ae9ddcec

pieh · 2018-08-03T12:31:15Z

packages/gatsby-link/src/index.js

+      getProps = ({ isCurrent }) =>
+        isCurrent
+          ? {
+              className: this.props.activeClassName,


I think we need to add default className (similiar how styles are merged in line below)
react-router's NavLink does that - https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js#L41-L42 if we want to maintain backward compatibility

Ah good catch, fixed in 33583a2

KyleAMathews · 2018-08-06T10:05:21Z

Deploy preview for image-processing failed.

Built with commit 7c61690

https://app.netlify.com/sites/image-processing/deploys/5b681c3482d3f128bebdcdb4

KyleAMathews · 2018-08-06T10:11:06Z

Deploy preview for image-processing failed.

Built with commit bc7035c

https://app.netlify.com/sites/image-processing/deploys/5b682baa792f8943ae9ddce6

pieh

LGTM!

justinwaite · 2018-08-07T19:00:54Z

Any idea on when docs would be updated for the client only routes using @reach/router?

KyleAMathews · 2018-08-08T06:39:06Z

@jdeanwaite they are e.g. https://next.gatsbyjs.org/docs/building-apps-with-gatsby/ and https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#migrate-from-react-router-to-reachrouter

justinwaite · 2018-08-08T18:14:56Z

@KyleAMathews Thanks for that, and thanks for all of the work you are doing on Gatsby!

deadcoder0904 · 2018-08-17T06:33:46Z

Hey @KyleAMathews does it need to be import { navigate } from "gatsby" instead of import { navigate } from "@reach/router" at https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#a-history-prop-is-no-longer-passed-to-page-components ?

Ohh no I got confused because of Link component imported from gatsby instead of react-router so I thought that must've been the case.

jorgegonzalez · 2018-08-19T21:35:15Z

I think activeClassName no longer works for the root route (/) until you navigate to it from a different route.

haxzie-xx · 2018-08-20T02:10:18Z

@jorgegonzalez tried exact={true} ? This worked for me.

@shannonbux

* Get @reach/router working probably in development * Moer stuff working * Don't support to as an object * Add back support for activeClassName & activeStyle * Fix path for RouteHandlers * Pull in parse-path util from react-router * remove console.logs and add TODO * Remove now unused webpack rules to trim down react-router * Some fixes from merge * Fix problems identified in review earlier * Remove old typescript definitions * Restore and update the <Link> documentation for v2/@reach/router I also added it to the API reference section — which seemed the right place for it. @shannonbux agree? * Also set the className when the site is active per @pieh's advice * Upgrade client-only-paths example site * Upgrade simple-auth example site * Fix lint errors * Migration docs * Note that can't use relative routes w/ @reach/router * Fix/remove tests that are irrelevant now * Fix imports * Use v2 version of children for layout * mini typos * Document that history prop no longer passed to page components

KyleAMathews added 2 commits July 31, 2018 16:35

Get @reach/router working probably in development

af1227c

Moer stuff working

e0f2bec

KyleAMathews added this to Needs Verification in Gatsby v2 Release via automation Aug 1, 2018

KyleAMathews moved this from Needs Verification to In progress in Gatsby v2 Release Aug 1, 2018

KyleAMathews added 8 commits August 1, 2018 10:53

Don't support to as an object

091ce37

Add back support for activeClassName & activeStyle

7a6c868

Fix path for RouteHandlers

48e3733

Pull in parse-path util from react-router

874acf1

remove console.logs and add TODO

a31706a

Merge remote-tracking branch 'origin/master' into reach-router

596796b

Remove now unused webpack rules to trim down react-router

9b7e648

Some fixes from merge

fed26d1

KyleAMathews commented Aug 2, 2018

View reviewed changes

packages/gatsby/cache-dir/production-app.js Outdated

setApiRunnerForLoader(apiRunner)

Copy link

Contributor Author

KyleAMathews Aug 2, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove

KyleAMathews added 2 commits August 2, 2018 18:09

Fix problems identified in review earlier

65e7d86

Remove old typescript definitions

9db958c

pieh mentioned this pull request Aug 3, 2018

Examples/using unstated #6920

Closed

pieh reviewed Aug 3, 2018

View reviewed changes

This was referenced Aug 3, 2018

change using-redux example to not use replaceRouterComponent API #6986

Merged

[gatsby] WIP Fix 404 page rendered with missing props and without correct location.pathname #5583

Closed

KyleAMathews added 3 commits August 6, 2018 09:47

Merge remote-tracking branch 'origin/master' into reach-router

197ed0e

Migration docs

7c61690

Note that can't use relative routes w/ @reach/router

8c0f084

Fix/remove tests that are irrelevant now

97ff092

KyleAMathews changed the title ~~[wip] Replace react-router with @reach/router fixes #5656~~ Replace react-router with @reach/router fixes #5656 Aug 6, 2018

KyleAMathews changed the title ~~Replace react-router with @reach/router fixes #5656~~ Replace react-router with @reach/router Aug 6, 2018

KyleAMathews mentioned this pull request Aug 6, 2018

fix: focus on the root div after navigation #5593

Closed

KyleAMathews and others added 5 commits August 6, 2018 11:54

Fix imports

01b9959

Use v2 version of children for layout

4c7e80c

mini typos

bc7035c

Merge remote-tracking branch 'origin/master' into reach-router

ea00a10

Document that history prop no longer passed to page components

06d9c77

pieh approved these changes Aug 6, 2018

View reviewed changes

KyleAMathews merged commit 5778c27 into master Aug 6, 2018

Gatsby v2 Release automation moved this from In progress to Done Aug 6, 2018

KyleAMathews deleted the reach-router branch August 6, 2018 11:24

travi mentioned this pull request Aug 7, 2018

reach-router support gvaldambrini/storybook-router#26

Open

m-allanson mentioned this pull request Aug 7, 2018

Remove using-react-url-query example #7097

Merged

sorrycc mentioned this pull request Aug 7, 2018

早报 @ 2018.8.8 sorrycc/zaobao#58

Open

KyleAMathews mentioned this pull request Aug 8, 2018

[gatsby-plugin-twitter] Not consistently working #1625

Closed

th0th mentioned this pull request Aug 15, 2018

[gatsby-plugin-react-next] <Link>'s activeClassName not respected, when pathPrefix is used #3238

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace react-router with @reach/router #6918

Replace react-router with @reach/router #6918

KyleAMathews commented Aug 1, 2018 •

edited by mikelax

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

gatsbybot commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 2, 2018

KyleAMathews Aug 2, 2018

KyleAMathews Aug 2, 2018

KyleAMathews commented Aug 3, 2018 •

edited

Loading

pieh Aug 3, 2018

KyleAMathews Aug 4, 2018

KyleAMathews commented Aug 6, 2018

KyleAMathews commented Aug 6, 2018 •

edited

Loading

pieh left a comment

justinwaite commented Aug 7, 2018

KyleAMathews commented Aug 8, 2018

justinwaite commented Aug 8, 2018

deadcoder0904 commented Aug 17, 2018 •

edited

Loading

jorgegonzalez commented Aug 19, 2018

haxzie-xx commented Aug 20, 2018

Replace react-router with @reach/router #6918

Replace react-router with @reach/router #6918

Conversation

KyleAMathews commented Aug 1, 2018 • edited by mikelax Loading

TODO

Upgrade sites

Document

Breaking changes to document

KyleAMathews commented Aug 1, 2018 • edited Loading

KyleAMathews commented Aug 1, 2018 • edited Loading

KyleAMathews commented Aug 1, 2018 • edited Loading

KyleAMathews commented Aug 1, 2018 • edited Loading

gatsbybot commented Aug 1, 2018 • edited Loading

KyleAMathews commented Aug 1, 2018 • edited Loading

KyleAMathews commented Aug 1, 2018 • edited Loading

KyleAMathews commented Aug 1, 2018 • edited Loading

KyleAMathews commented Aug 2, 2018

KyleAMathews Aug 2, 2018

Choose a reason for hiding this comment

KyleAMathews Aug 2, 2018

Choose a reason for hiding this comment

KyleAMathews commented Aug 3, 2018 • edited Loading

pieh Aug 3, 2018

Choose a reason for hiding this comment

KyleAMathews Aug 4, 2018

Choose a reason for hiding this comment

KyleAMathews commented Aug 6, 2018

KyleAMathews commented Aug 6, 2018 • edited Loading

pieh left a comment

Choose a reason for hiding this comment

justinwaite commented Aug 7, 2018

KyleAMathews commented Aug 8, 2018

justinwaite commented Aug 8, 2018

deadcoder0904 commented Aug 17, 2018 • edited Loading

jorgegonzalez commented Aug 19, 2018

haxzie-xx commented Aug 20, 2018

KyleAMathews commented Aug 1, 2018 •

edited by mikelax

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

gatsbybot commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 3, 2018 •

edited

Loading

KyleAMathews commented Aug 6, 2018 •

edited

Loading

deadcoder0904 commented Aug 17, 2018 •

edited

Loading