Add `location` prop to useRoutes() for e.g. animated transitions between routes #7298

MeiKatz · 2020-04-30T18:49:04Z

Maybe someone can tell me how I can create a branch from a commit without copying all the commits from the contributors before it. Or this okay this way?

timdorr · 2020-04-30T18:51:52Z

You were based on the master branch. I switched it to dev.

MeiKatz · 2020-04-30T19:00:00Z

Thank you!

packages/react-router/index.js

laurencefass · 2020-05-12T15:59:07Z

ive subscribed to this thread. will it get updated if/when merged to the main branch? thanks.

MeiKatz · 2020-05-12T16:11:36Z

@laurencefass I will add a comment when my pull request got merged.

gustavopch · 2020-06-15T17:30:23Z

Will this get merged?

MeiKatz · 2020-06-15T18:52:05Z

@gustavopch I hope so. As you can see, @timdorr currently tries to solve the merge conflicts that occurred lately.

timdorr · 2020-06-15T18:53:17Z

I just did a simple conflict resolution. Looks like it needs some more work around the types, though.

MeiKatz · 2020-06-15T18:54:55Z

@timdorr I will have a look at it tomorrow.

shwao · 2020-07-03T13:35:34Z

Is there anything that could be done to get this merged? I would love to help but i cant see the conflict.

MeiKatz · 2020-07-03T13:44:01Z

@shwao I have to fix it again. But it would be great if it could be merged before the repository is changed again.

ashkan-pm · 2020-07-20T02:02:04Z

Guys any progress on this? I'd be happy to help if there is anything I can do

MeiKatz · 2020-08-12T20:00:00Z

So. I fixed the latest conflict. Please: merge it! I don't want to solve the same conflict again and again! @timdorr @mjackson @ryanflorence

chris-lock · 2020-09-21T15:53:01Z

packages/react-router/index.tsx

+  let currentLocation = useLocation() as Location;
+  let usedLocation = location || currentLocation;
+
+  let matches = React.useMemo(() => matchRoutes(routes, usedLocation, basename), [
    location,


Really excited about this change @MeiKatz. One additional change: You’ll want to update the dependency array for useMemo to reference usedLocation instead of location so that it updates when that changes:

let matches = React.useMemo(() => matchRoutes(routes, usedLocation, basename), [ usedLocation, routes, basename ]);

Thank you. I think I had this in but after all the edits I may have lost it.

@MeiKatz - perhaps you should force push an update to your PR with this ^ fix ?
@mjackson - I would love to see this get merged; pending your approval... I would like to start adding easy transitions to my routes.

@ThomasBurleson the problem is, that I fix this pull request everytime there is a change in the code of others. And as long as nobody wants to merge my code I am unwilling to update it again and again.

@mjackson @ryanflorence @timdorr give me a sign if you want my pull request to be merged. Then I will fix it again and we can merge it. This pull request is open for too long and I want this story to have an end in the near future. Please be so kind.

stale · 2020-11-20T16:33:07Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
You can add the fresh label to prevent me from taking any action.

MeiKatz · 2020-11-28T12:17:22Z

Please add fresh tag!

lwyj123 · 2021-01-03T15:54:41Z

As I mentioned in #7117

Same issues here, I was trying to add a page transition for my webapp, seems that the old example like this doesn't works for react-router v6. What's the solution in v6?

There are some problems for page transition and I really need it. Could @timdorr @ThomasBurleson take a look at this MR again?

gustavopch · 2021-01-03T18:10:49Z

@timdorr Is it really necessary to wait for @mjackson and @ryanflorence even though v6 is still currently in beta? I mean, everybody knows it's not stable and that breaking changes may occur until the stable release. It seems it's more harmful to hold this PR than to release it and start receiving any possible issues from users ASAP.

timdorr · 2021-01-04T15:09:20Z

It's more that I know MJ and Ryan have made their own internal changes while developing Remix, so merging and releasing changes to the library is just going to cause conflicts and reverts later on. Unfortunately, they have been solely focused on Remix, so they haven't yet shared those changes, which would allow us to start merging changes here. It's a bit of BDFL situatiion, so we're at their whim.

gustavopch · 2021-01-04T17:11:58Z

@timdorr Thanks for the explanation.

So I guess the best, for now, is to just use a fork.

gnapse · 2021-01-12T16:25:32Z

So I guess the best, for now, is to just use a fork.

Or using patch-package. I'm going to attempt that.

Indeed, this situation sucks. But I'm sure it will all be better when some of the goodies from Remix come back to react-router. Hopefully soon!

mkaizad · 2021-01-16T10:13:34Z

Thanks for suggesting patch-package @gnapse, it's a great tool.

JamesGelok · 2021-06-10T16:27:00Z

@MeiKatz You might've already seen this but @mjackson just tweeted about a potential stable release soon.

So maybe if @mjackson, @ryanflorence, @timdorr are available to give a sign that it's ready to be merged, you could resolve the conflict (possibly with @chris-lock's useMemo dependency suggestion) and potentially they could include it in the next stable release so we can finally natively use animated transitions between routes again.

If not, it could be a good addition to the next react-router-dom@next after stable release.

MeiKatz · 2021-07-08T07:09:42Z

I don't know why, but when I try to check possible merge conflicts here in GitHub then I only get the loading spinner of eternity. Can somebody tell me if my PR has any conflicts? I then would fix them so this PR could be merged (after a looooong time pending).

JamesGelok · 2021-07-08T10:00:37Z

@MeiKatz

packages/react-router/__tests__/Routes-test.js
packages/react-router/__tests__/useRoutes-test.js
packages/react-router/index.tsx

MeiKatz · 2021-07-08T13:02:04Z

So. The pull request is up to date. Hopefully this was the last time I had to do it. So: please merge it!

timdorr · 2021-07-08T17:19:44Z

Doesn't look like it at the moment. Try a rebase against the latest dev branch.

- the 2nd parameter of useRoutes() is now an object expecting `basename` and `location` as options - did a little refactoring of the tests for useRoutes() and <Routes />

MeiKatz · 2021-07-09T07:56:33Z

@timdorr Is it now correct?

lwyj123 · 2021-07-09T08:33:57Z

@MeiKatz It seems like the CI is failed. you can check the action script to test locally.

ryanflorence · 2021-12-09T19:36:29Z

Thanks for the work on this, and sorry for the BDFL, we'll be much more attentive here now that software is our sole focus.

Good news is, useRoutes takes the location arg:

react-router/packages/react-router/index.tsx

Line 582 in 8f63699

locationArg?: Partial<Location> | string

timdorr changed the base branch from master to dev April 30, 2020 18:51

timdorr reviewed Apr 30, 2020

View reviewed changes

packages/react-router/index.js Outdated Show resolved Hide resolved

MeiKatz mentioned this pull request May 1, 2020

[v6] animated switch between routes in v6 #7297

Closed

timdorr reviewed May 1, 2020

View reviewed changes

packages/react-router/index.js Outdated Show resolved Hide resolved

MeiKatz mentioned this pull request May 12, 2020

alpha 6 and react-transition-group integration. #7333

Closed

ashkan-pm mentioned this pull request Jun 27, 2020

Switch "location" prop in v6 #7117

Closed

smvv mentioned this pull request Aug 20, 2020

[v6] Add location prop to Routes and RouteOptions to useRoutes #7571

Closed

chris-lock reviewed Sep 21, 2020

View reviewed changes

stale bot added the stale label Nov 20, 2020

stale bot closed this Nov 27, 2020

timdorr added fresh and removed stale labels Nov 28, 2020

timdorr reopened this Nov 28, 2020

convert several tests to TS

78ebff2

MeiKatz added 5 commits July 8, 2021 19:32

fixed errors and added tests for useRoutes() and <Routes />

2808498

- the 2nd parameter of useRoutes() is now an object expecting `basename` and `location` as options - did a little refactoring of the tests for useRoutes() and <Routes />

fix type mismatch for route.preload()

242c0a6

Merge latest version react-router/dev

26ed137

Merge changes from /dev

0b1f9db

Merge changes from /dev (merged: e92148a)

9d9c7f7

MeiKatz force-pushed the location-prop-for-routes branch from d2f5801 to 9d9c7f7 Compare July 9, 2021 07:55

mjackson removed the fresh label Sep 9, 2021

timdorr force-pushed the dev branch from 176800e to 53847bb Compare December 3, 2021 13:52

ryanflorence closed this Dec 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `location` prop to useRoutes() for e.g. animated transitions between routes #7298

Add `location` prop to useRoutes() for e.g. animated transitions between routes #7298

MeiKatz commented Apr 30, 2020 •

edited

timdorr commented Apr 30, 2020

MeiKatz commented Apr 30, 2020

laurencefass commented May 12, 2020

MeiKatz commented May 12, 2020

gustavopch commented Jun 15, 2020

MeiKatz commented Jun 15, 2020

timdorr commented Jun 15, 2020

MeiKatz commented Jun 15, 2020

shwao commented Jul 3, 2020 •

edited

MeiKatz commented Jul 3, 2020

ashkan-pm commented Jul 20, 2020

MeiKatz commented Aug 12, 2020 •

edited

chris-lock Sep 21, 2020

MeiKatz Sep 21, 2020

ThomasBurleson Dec 9, 2020

MeiKatz Dec 9, 2020

stale bot commented Nov 20, 2020

MeiKatz commented Nov 28, 2020

lwyj123 commented Jan 3, 2021 •

edited

gustavopch commented Jan 3, 2021

timdorr commented Jan 4, 2021

gustavopch commented Jan 4, 2021 •

edited

gnapse commented Jan 12, 2021

mkaizad commented Jan 16, 2021

JamesGelok commented Jun 10, 2021

MeiKatz commented Jul 8, 2021

JamesGelok commented Jul 8, 2021

MeiKatz commented Jul 8, 2021

timdorr commented Jul 8, 2021

MeiKatz commented Jul 9, 2021

lwyj123 commented Jul 9, 2021

ryanflorence commented Dec 9, 2021

Add location prop to useRoutes() for e.g. animated transitions between routes #7298

Add location prop to useRoutes() for e.g. animated transitions between routes #7298

Conversation

MeiKatz commented Apr 30, 2020 • edited

timdorr commented Apr 30, 2020

MeiKatz commented Apr 30, 2020

laurencefass commented May 12, 2020

MeiKatz commented May 12, 2020

gustavopch commented Jun 15, 2020

MeiKatz commented Jun 15, 2020

timdorr commented Jun 15, 2020

MeiKatz commented Jun 15, 2020

shwao commented Jul 3, 2020 • edited

MeiKatz commented Jul 3, 2020

ashkan-pm commented Jul 20, 2020

MeiKatz commented Aug 12, 2020 • edited

chris-lock Sep 21, 2020

Choose a reason for hiding this comment

MeiKatz Sep 21, 2020

Choose a reason for hiding this comment

ThomasBurleson Dec 9, 2020

Choose a reason for hiding this comment

MeiKatz Dec 9, 2020

Choose a reason for hiding this comment

stale bot commented Nov 20, 2020

MeiKatz commented Nov 28, 2020

lwyj123 commented Jan 3, 2021 • edited

gustavopch commented Jan 3, 2021

timdorr commented Jan 4, 2021

gustavopch commented Jan 4, 2021 • edited

gnapse commented Jan 12, 2021

mkaizad commented Jan 16, 2021

JamesGelok commented Jun 10, 2021

MeiKatz commented Jul 8, 2021

JamesGelok commented Jul 8, 2021

MeiKatz commented Jul 8, 2021

timdorr commented Jul 8, 2021

MeiKatz commented Jul 9, 2021

lwyj123 commented Jul 9, 2021

ryanflorence commented Dec 9, 2021

Add `location` prop to useRoutes() for e.g. animated transitions between routes #7298

Add `location` prop to useRoutes() for e.g. animated transitions between routes #7298

MeiKatz commented Apr 30, 2020 •

edited

shwao commented Jul 3, 2020 •

edited

MeiKatz commented Aug 12, 2020 •

edited

lwyj123 commented Jan 3, 2021 •

edited

gustavopch commented Jan 4, 2021 •

edited