React-router v6

[Asher978]

Hello,

Is this react-router v6 compatible?

[eleventhaus]

Also wondering if this is v6 compatible

[mjrussell]

Hi, unfortunately I'm not actively maintaining this repo any more. Looking at the react router v6 docs, it looks like there are some breaking changes so I wouldn't expect this to work without some modifications.

[r3b311i0n]

I'm starting a fresh project and tried this and it seems to be working fine (with redux-first-history). What are the breaking changes in react-router v6 which affects redux-auth-wrapper?

import { connectedReduxRedirect } from 'redux-auth-wrapper/history4/redirect';
import { replace } from 'redux-first-history';

import LoadingPage from 'components/LoadingPage';

function redirectUser(state) {
  if (state.global.currentUser.id) {
    return '/test';
  }
  return '/login';
}

export const isAuthenticated = connectedReduxRedirect({
  redirectPath: state => redirectUser(state),
  authenticatedSelector: state => !!state.global.currentUser.id,
  authenticatingSelector: state => !state.global.checkedMeAuth,
  allowRedirectBack: false,
  AuthenticatingComponent: LoadingPage,
  wrapperDisplayName: 'IsAuthenticated',
  redirectAction: replace,
});

[mjrussell]

That's good to hear! Do you know what version of history you are getting as a transitive dependency?

[r3b311i0n]

Sure. It's history 5.3.0.

[mjrussell]

Based on https://github.com/mjrussell/redux-auth-wrapper/issues/267 have you seen the query param populated properly?

[r3b311i0n]

Seems to be working fine for me (with redirectPath as a string or a function). But I'm using connectedReduxRedirect with redux-first-history instead of connectedRouterRedirect. I think connected-react-router doesn't work well with history 5 and doesn't support react-router 6.

[alibalouchi95]

in the react-router-dom official website said:

You'll also want to remove the history dependency from your package.json. The history library is a direct dependency of v6 (not a peer dep), so you won't ever import or use it directly. Instead, you'll use the useNavigate() hook for all navigation (see below).

so are you sure it's compatible with v6?

[pinksynth]

Just to chime in, in case it's helpful to anyone: My app was upgraded to redux-first-history and has been able to use this lib successfully, but I did have to set allowRedirectBack: false or else I got errors.