Skip to content
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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix usage of Navigate in strict mode when using a data router #10435

Merged
merged 4 commits into from May 2, 2023

Conversation

brophdawg11
Copy link
Contributor

Closes #10417

@changeset-bot
Copy link

changeset-bot bot commented May 2, 2023

🦋 Changeset detected

Latest commit: 7f83a20

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
react-router Patch
react-router-dom Patch
react-router-dom-v5-compat Patch
react-router-native Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@brophdawg11 brophdawg11 linked an issue May 2, 2023 that may be closed by this pull request
Comment on lines -224 to -226
if (dataRouterState && dataRouterState.navigation.state !== "idle") {
return;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We no longer need this now that the effect has a proper dependency array - since it won't re-fire on the second render because the path own't have changed.

Comment on lines +235 to +238
React.useEffect(
() => navigate(JSON.parse(jsonPath), { replace, state, relative }),
[navigate, jsonPath, relative, replace, state]
);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The reason this was problematic in 6.11 is that we would call navigate twice and when in a RouterProvider we'd delay resolving the relative path until inside the router. And thus the second execution would re-resolve to against the current location (which in a on-loader scenario would already be updated from the first effect).

Instead, we resolve the absolute path here in Navigate so that duplicate calls to navigate via the data router go to the same path - just as they do in BrowserRouter.

Copy link
Member

@jacob-ebey jacob-ebey May 2, 2023

Choose a reason for hiding this comment

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

I'm a little worried about state being in there. I'd still like to see this be an empty array as I think we are going to see bad app/library provider code that immediately flows new state / props down causing a new state identity due to no-one ever in the history of app code memoing the value they pass in. If tests are passing across react v17 and 18 though I'm fine shipping it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

For future reference we tested the unit test setups from 93ccb2b in demo apps using react 16.8 and 18 and confirmed the UI was the same (even if the underlying React.StrictMode execution approaches differed). We may try to see if we can get our test suite running against both versions in a separate undertaking.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Also, I think we're no worse off than we were previously where the effect had no second param since it would have re-run every time anyway?

Copy link
Member

Choose a reason for hiding this comment

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

Thanks!

Copy link

Choose a reason for hiding this comment

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

I'm a little worried about state being in there. I'd still like to see this be an empty array as I think we are going to see bad app/library provider code that immediately flows new state / props down causing a new state identity due to no-one ever in the history of app code memoing the value they pass in. If tests are passing across react v17 and 18 though I'm fine shipping it.

This wound up biting me. I had an object that I was passing to state that wasn't memo'd. I think the check for dataRouterState !== "idle" saved me prior to 6.11.1, but with this change I had a flurry of redirects (each calling a loader and reloading a file hundreds of times).

@brophdawg11 brophdawg11 merged commit c4e9607 into dev May 2, 2023
2 checks passed
@brophdawg11 brophdawg11 deleted the brophdawg11/fix-navigate-data-router branch May 2, 2023 20:44
@github-actions
Copy link
Contributor

github-actions bot commented May 2, 2023

🤖 Hello there,

We just published version 6.11.1-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023

🤖 Hello there,

We just published version 6.11.1 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Navigate malfunction in createBrowserRouter
4 participants