Support react-router v6 #26

denysoblohin-okta · 2020-11-02T12:38:46Z

react-router v6 introduces breaking changes

useRouteMatch is not exported, see issue. react-router v6 uses useMatch instead
<Route>s should be inside <Routes>
<Route exact> removed, so need to use * in path if it's not exact
<Route component> and <Route render> removed, replaced with <Route element>

Issue: https://github.com/okta/okta-oidc-js/issues/853
Internal ref: https://oktainc.atlassian.net/browse/OKTA-318565

PR for samples: okta/samples-js-react#143

Warning! This PR uses react-router 6.0.0-beta.0 and should be revised after stable RR release. Do not merge.

oleksandrpravosudko-okta · 2020-11-16T09:45:59Z

test/e2e/harness/src/App.js

+        <Routes>
+          <Route path='/login' element={<CustomLogin />}/>
+          <Route path='/sessionToken-login' element={<SessionTokenLogin />}/>
+          <SecureRoute path='/protected' element={<Protected />}/>


need to specify /protected/* here as well?

nvm, just noticed it was exact before

test/jest/secureRoute.test.js

shuowu · 2020-12-23T16:45:33Z

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 5.0.0


Let's base this PR against the dev-5.0 branch instead of master.

shuowu · 2020-12-23T16:50:48Z

README.md

    // Redirect to the /login page that has a CustomLoginComponent
    // This example is specific to React-Router
-    history.push('/login');
+    navigate('/login');


no change here. navigate should only be a replacement of restoreOriginalUri from oktaAuth to decouple react-router dependency in <Security>.

react-router v6 has no useHistory hook, but added useNavigate instead
https://github.com/ReactTraining/react-router/blob/dev/docs/advanced-guides/migrating-5-to-6.md#use-navigate-instead-of-history

shuowu · 2020-12-23T16:58:38Z

@denysoblohin-okta Let's split react-router@6(beta) change and decoupling react-router from <Security> into two different PRs as we want to merge them separately.

For the decoupling PR, please base it against dev-5.0 branch instead of master.
For the react-router 6 PR, you can set it as a draft PR.

denysoblohin-okta

@shuowu
I included adding navigate prop to Security in this PR to not break support of react-router 5.
react-router 5 should use useHistory hook, react-router 6 should use useNavigate hook.
So looks like this PR depends from decoupling PR.

denysoblohin-okta · 2020-12-23T18:32:23Z

README.md

    // Redirect to the /login page that has a CustomLoginComponent
    // This example is specific to React-Router
-    history.push('/login');
+    navigate('/login');


react-router v6 has no useHistory hook, but added useNavigate instead
https://github.com/ReactTraining/react-router/blob/dev/docs/advanced-guides/migrating-5-to-6.md#use-navigate-instead-of-history

shuowu · 2020-12-23T19:44:51Z

I included adding navigate prop to Security in this PR to not break support of react-router 5.

Let's focus on the decoupling PR first (targeting to dev-5.0). Then get back to this PR when react-router 6 is ready.

As we don't know a clear timeline for when react-router@6 will be officially available, it may even come to okta-react v6 or later.

oleksandrpravosudko-okta · 2021-01-25T15:34:16Z

src/SecureRoute.tsx

  const { oktaAuth, authState, _onAuthRequired } = useOktaAuth();
-  const match = useRouteMatch(routeProps);
+  const { path, caseSensitive } = routeProps;
+  const match = path ? useMatch.call(null, { path, caseSensitive }) : null;


useMatch doesn't seem to be matching a route when basename property is set
we could provide useLocation().pathname value(which includes basename) as path parameter for useMatch()

ericlifs · 2021-11-11T14:46:30Z

Is there a way we can merge this? React router now has a stable v6 release.

Thanks!

flying-sheep · 2021-12-09T10:00:09Z

What’s the way forward here? Anything missing?

difilippoagustin · 2021-12-20T14:46:32Z

Is there any news with this?

djrumph · 2021-12-31T23:03:23Z

Wanted to follow up on this as well. Curious if this is planned to be merged in anytime soon.

PakitoSec · 2022-01-10T11:36:00Z

Could you please merge and release this pull requests ? we need it for our deployment...

sturmery · 2022-01-15T07:31:38Z

@denysoblohin-okta @oleksandrpravosudko-okta Please get this merged, it's really blocking our transition to react-router-dom v6.x. Thank you.

dawit-nigusu · 2022-01-24T07:42:19Z

@denysoblohin-okta @oleksandrpravosudko-okta
I am also stacked here, wanted to upgrate to react-router-dom v6 but okta/react seems dont support that because of useRouteMatch by useMatch . anytime soon this PR can be merged please?

ondrejvelisek · 2022-02-01T15:13:09Z

Hi there, anything new with this? May I somehow help to push it forward? Thanks.

gvonderschmitt · 2022-02-02T10:21:05Z

I have the same issue and I am stuck as well. This issue is important and urgent - altough react-router-dom v6 is not new anymore.
So please merge this into the main branch as soon as possbible as a lot of people are waiting for this. Many thx in advance.

geoalexidis · 2022-02-02T13:14:23Z

wen react-router v6?

gvonderschmitt · 2022-02-02T14:04:06Z

wen react-router v6?

Yes

johnflux · 2022-02-15T11:48:17Z

Is there any way to use this using npm?
Any idea when this will be merged please?

johnflux · 2022-02-15T11:57:12Z

Attempting to npm install the pull request fails with a typescript error:

npm install https://github.com/okta/okta-react#OKTA-318565-react-router-6

npm ERR! prepareGitDep [!] (plugin rpt2) Error: ~/.npm/_cacache/tmp/git-clone-de1a165a/src/SecureRoute.tsx(29,33): semantic error TS2339: Property 'call' does not exist on type '((_props: PathRouteProps | LayoutRouteProps | IndexRouteProps) => ReactElement<any, string | JSXElementConstructor<any>>) | ... 32 more ... | ForwardRefExoticComponent<...>'.
npm ERR! prepareGitDep   Property 'call' does not exist on type 'Context<NavigationContextObject>'.
npm ERR! prepareGitDep src/SecureRoute.tsx

flying-sheep · 2022-02-15T17:20:49Z

I have a v6 only version here: https://github.com/flying-sheep/okta-react/tree/flying-sheep/okta-react-router-6

see here for the changes: master...flying-sheep:flying-sheep/okta-react-router-6

uday-at-tomo · 2022-02-18T17:16:07Z

This approach works for us with latest react and react router

#178 (comment)

washingtonsoares · 2022-03-18T11:29:52Z

Hi guys, any update on this? is there anything missing?

yanavozniuk · 2022-05-12T09:38:27Z

Any updates??

seanmcquaid · 2022-06-01T21:22:14Z

Any updates on this??

yanavozniuk · 2022-06-02T07:43:19Z

Any updates on this??

I created my own security route
And stop using it from okta

denysoblohin-okta mentioned this pull request Nov 2, 2020

Migrate to react-router v6 okta/samples-js-react#143

Draft

denysoblohin-okta force-pushed the OKTA-318565-react-router-6 branch 2 times, most recently from de2226d to bc33c24 Compare November 10, 2020 15:36

oleksandrpravosudko-okta reviewed Nov 16, 2020

View reviewed changes

denysoblohin-okta force-pushed the OKTA-318565-react-router-6 branch from 92b6178 to d03728b Compare November 18, 2020 00:32

denysoblohin-okta marked this pull request as ready for review November 18, 2020 00:51

oleksandrpravosudko-okta approved these changes Nov 18, 2020

View reviewed changes

oleksandrpravosudko-okta reviewed Nov 18, 2020

View reviewed changes

test/jest/secureRoute.test.js Outdated Show resolved Hide resolved

dsrinislm-zz approved these changes Nov 24, 2020

View reviewed changes

denysoblohin-okta force-pushed the OKTA-318565-react-router-6 branch 2 times, most recently from 8ff98c4 to e8c73b1 Compare December 18, 2020 08:59

chore: bump version to 5.0

b9e628f

shuowu reviewed Dec 23, 2020

View reviewed changes

CHANGELOG.md

@@ -1,3 +1,13 @@

# 5.0.0

Copy link

Contributor

shuowu Dec 23, 2020

Choose a reason for hiding this comment

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

Let's base this PR against the dev-5.0 branch instead of master.

shuowu reviewed Dec 23, 2020

View reviewed changes

denysoblohin-okta marked this pull request as draft December 23, 2020 18:34

denysoblohin-okta commented Dec 23, 2020

View reviewed changes

denysoblohin-okta added 2 commits January 15, 2021 18:27

Support RR 5 or 6

7a311dc

Remove navigate prop

b75892c

denysoblohin-okta force-pushed the OKTA-318565-react-router-6 branch from 8331378 to b75892c Compare January 15, 2021 16:31

denysoblohin-okta changed the base branch from master to dev-5.0 January 15, 2021 16:39

oleksandrpravosudko-okta reviewed Jan 25, 2021

View reviewed changes

denysoblohin-okta force-pushed the dev-5.0 branch from d448ab2 to e7925e5 Compare February 23, 2021 19:14

ghost mentioned this pull request Nov 11, 2021

'useRouteMatch' is not exported from 'react-router-dom' #187

Closed

3 tasks

baumandm mentioned this pull request Jan 10, 2022

fix(deps): bump @okta/okta-react from 3.0.8 to 6.3.0 ExpediaGroup/insights-explorer#258

Closed

Support react-router v6 #26

Are you sure you want to change the base?

Support react-router v6 #26

Uh oh!

Conversation

denysoblohin-okta commented Nov 2, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oleksandrpravosudko-okta Nov 16, 2020

Choose a reason for hiding this comment

Uh oh!

oleksandrpravosudko-okta Nov 16, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

shuowu Dec 23, 2020

Choose a reason for hiding this comment

Uh oh!

shuowu Dec 23, 2020

Choose a reason for hiding this comment

Uh oh!

denysoblohin-okta Dec 23, 2020

Choose a reason for hiding this comment

Uh oh!

shuowu commented Dec 23, 2020

Uh oh!

denysoblohin-okta left a comment

Choose a reason for hiding this comment

Uh oh!

denysoblohin-okta Dec 23, 2020

Choose a reason for hiding this comment

Uh oh!

shuowu commented Dec 23, 2020

Uh oh!

oleksandrpravosudko-okta Jan 25, 2021

Choose a reason for hiding this comment

Uh oh!

ericlifs commented Nov 11, 2021

Uh oh!

flying-sheep commented Dec 9, 2021

Uh oh!

difilippoagustin commented Dec 20, 2021

Uh oh!

djrumph commented Dec 31, 2021

Uh oh!

PakitoSec commented Jan 10, 2022

Uh oh!

sturmery commented Jan 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dawit-nigusu commented Jan 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ondrejvelisek commented Feb 1, 2022

Uh oh!

gvonderschmitt commented Feb 2, 2022

Uh oh!

geoalexidis commented Feb 2, 2022

Uh oh!

gvonderschmitt commented Feb 2, 2022

Uh oh!

johnflux commented Feb 15, 2022

Uh oh!

johnflux commented Feb 15, 2022

Uh oh!

flying-sheep commented Feb 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

uday-at-tomo commented Feb 18, 2022

Uh oh!

washingtonsoares commented Mar 18, 2022

Uh oh!

yanavozniuk commented May 12, 2022

Uh oh!

seanmcquaid commented Jun 1, 2022

Uh oh!

yanavozniuk commented Jun 2, 2022

Uh oh!

Uh oh!

denysoblohin-okta commented Nov 2, 2020 •

edited

Loading

sturmery commented Jan 15, 2022 •

edited

Loading

dawit-nigusu commented Jan 24, 2022 •

edited

Loading

flying-sheep commented Feb 15, 2022 •

edited

Loading