New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace react-router with @reach/router #6918

Merged
merged 27 commits into from Aug 6, 2018

Conversation

9 participants
@KyleAMathews
Contributor

KyleAMathews commented Aug 1, 2018

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 #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

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 1, 2018

Contributor

Deploy preview for using-postcss-sass failed.

Built with commit 06d9c77

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

Contributor

KyleAMathews commented Aug 1, 2018

Deploy preview for using-postcss-sass failed.

Built with commit 06d9c77

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

@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 1, 2018

Contributor

Deploy preview for using-glamor failed.

Built with commit 06d9c77

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

Contributor

KyleAMathews commented Aug 1, 2018

Deploy preview for using-glamor failed.

Built with commit 06d9c77

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

@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 1, 2018

Contributor

Deploy preview for using-contentful failed.

Built with commit 06d9c77

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

Contributor

KyleAMathews commented Aug 1, 2018

Deploy preview for using-contentful failed.

Built with commit 06d9c77

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

@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 1, 2018

Contributor

Deploy preview for using-jss failed.

Built with commit 06d9c77

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

Contributor

KyleAMathews commented Aug 1, 2018

Deploy preview for using-jss failed.

Built with commit 06d9c77

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

@gatsbybot

This comment has been minimized.

Show comment
Hide comment
@gatsbybot

gatsbybot commented Aug 1, 2018

Deploy preview for using-drupal failed.

Built with commit 06d9c77

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

@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 1, 2018

Contributor

Deploy preview for gatsbygram failed.

Built with commit 06d9c77

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

Contributor

KyleAMathews commented Aug 1, 2018

Deploy preview for gatsbygram failed.

Built with commit 06d9c77

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

@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 1, 2018

Contributor

Deploy preview for using-remark failed.

Built with commit 06d9c77

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

Contributor

KyleAMathews commented Aug 1, 2018

Deploy preview for using-remark failed.

Built with commit 06d9c77

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

@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 1, 2018

Contributor

Deploy preview for gatsbyjs failed.

Built with commit 06d9c77

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

Contributor

KyleAMathews commented Aug 1, 2018

Deploy preview for gatsbyjs failed.

Built with commit 06d9c77

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

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

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

@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 2, 2018

Contributor

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

Contributor

KyleAMathews commented Aug 2, 2018

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

@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 3, 2018

Contributor

Deploy preview for using-styled-components failed.

Built with commit bc7035c

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

Contributor

KyleAMathews commented Aug 3, 2018

Deploy preview for using-styled-components failed.

Built with commit bc7035c

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

@pieh pieh referenced this pull request Aug 3, 2018

Closed

Examples/using unstated #6920

Show outdated Hide outdated packages/gatsby-link/src/index.js Outdated
@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 6, 2018

Contributor

Deploy preview for image-processing failed.

Built with commit 7c61690

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

Contributor

KyleAMathews commented Aug 6, 2018

Deploy preview for image-processing failed.

Built with commit 7c61690

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

@KyleAMathews

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 6, 2018

Contributor

Deploy preview for image-processing failed.

Built with commit bc7035c

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

Contributor

KyleAMathews commented Aug 6, 2018

Deploy preview for image-processing failed.

Built with commit bc7035c

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

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

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

KyleAMathews and others added some commits Aug 6, 2018

@pieh

pieh approved these changes Aug 6, 2018

LGTM!

@KyleAMathews KyleAMathews merged commit 5778c27 into master Aug 6, 2018

1 of 3 checks passed

deploy/netlify Deploy preview failed.
Details
continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

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

@KyleAMathews KyleAMathews deleted the reach-router branch Aug 6, 2018

@shannonbux

This comment has been minimized.

Show comment
Hide comment
@shannonbux

shannonbux Aug 7, 2018

Collaborator
Collaborator

shannonbux commented on 96c1c92 Aug 7, 2018

This comment has been minimized.

Show comment
Hide comment
@shannonbux

shannonbux Aug 7, 2018

Collaborator
Collaborator

shannonbux replied Aug 7, 2018

This comment has been minimized.

Show comment
Hide comment
@KyleAMathews

KyleAMathews Aug 7, 2018

Contributor

Already updated the tutorial a long time ago. This was me just noticing we never added a docs page for it.

Contributor

KyleAMathews replied Aug 7, 2018

Already updated the tutorial a long time ago. This was me just noticing we never added a docs page for it.

@jdeanwaite

This comment has been minimized.

Show comment
Hide comment
@jdeanwaite

jdeanwaite Aug 7, 2018

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

jdeanwaite commented Aug 7, 2018

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

@sorrycc sorrycc referenced this pull request Aug 7, 2018

Open

鏃╂姤 @ 2018.8.8 #58

@jdeanwaite

This comment has been minimized.

Show comment
Hide comment
@jdeanwaite

jdeanwaite Aug 8, 2018

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

jdeanwaite commented Aug 8, 2018

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

@deadcoder0904

This comment has been minimized.

Show comment
Hide comment
@deadcoder0904

deadcoder0904 Aug 17, 2018

Contributor

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.

Contributor

deadcoder0904 commented Aug 17, 2018

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

This comment has been minimized.

Show comment
Hide comment
@jorgegonzalez

jorgegonzalez Aug 19, 2018

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

jorgegonzalez commented Aug 19, 2018

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

@haxzie

This comment has been minimized.

Show comment
Hide comment
@haxzie

haxzie Aug 20, 2018

Contributor

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

Contributor

haxzie commented Aug 20, 2018

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

porfirioribeiro added a commit to porfirioribeiro/gatsby that referenced this pull request Aug 22, 2018

Replace react-router with @reach/router (gatsbyjs#6918)
* 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment