ProtectedRoute: Navigate Component not working

[hellagutmann-soelen]

Hello,

after implementing redux-react-router into my project my ProtectedRouter Component always seems to fall on the fallback return case ()

Protecte

Obviously I am doing something wrong. Could you kindly point out where I should look into?

Thanks in advance

[hellagutmann-soelen]

Odd, with a timeout everything seems to be working

const ProtectedRoute:FunctionComponent<Props> = ( props ) => {

  const authentication = useSelector( (state:RootState) => state.app.authentication );
  const state = useSelector( (state:RootState) => state );

  const dispatch = useDispatch<AppDispatch>()

  setTimeout( () => {

    if ( authentication === 'failed' ) {
    dispatch( push( '/' ) );
    }
  }, 1 );

  if( authentication === 'succeeded' ) return props.children;

  return <LinearProgress />;
}

[hellagutmann-soelen]

I created a small example here:

https://github.com/hellagutmann-soelen/react-router-v6-redux

After cloning, installing and starting you will see the issue by visiting http://localhost:4002/settings. You would think the dispatch( push( '/' ) ); in src/navigation/ProtectedNavigation/ProtectedNavigation.tsx would navigate settings back to signin correctly but this is simply not happening

[lagunovsky]

I'll take a look soon

[D3Pheonix]

@lagunovsky it works on react v18 ?

[lagunovsky]

@hellagutmann-soelen you can try version 4.0.0-next.0

[hellagutmann-soelen]

@lagunovsky In the example rep I updated to version 4.0.0-next.0

package.json

I uncommented the push dispatch outside setTimeout and commented the push dispatch inside setTimeout in order to test this version:

ProtectedNavigation.tsx

In addition I also adjusted main.tsx since it did not seem to support the timeline feature anymore (tsc is complaining)

main.tsx

Unfortunatly version 4.0.0-next.0 did not seems to fix the issue. Visiting localhost:4002/settings is not redirecting to / unless you put the push dispatch back into the setTimeout

Btw, seems like push is not able to dispatch the ON_LOCATION_CHANGED action when you put it outside setTimeout.

push dispatch outside setTimeout

push dispatch inside setTimeout

[hellagutmann-soelen]

Perhaps it has nothing to do with your package/software, in the weekend I tried to write a simple react redux routing for myself based on this example with similar issues. Perhaps it simply has something todo with the history package.

[lagunovsky]

Fixed in 4.0.0-next.2

However, you should use <Navigate /> or wrap the dispatch(push('/')) in a useEffect.

[hellagutmann-soelen]

Tested the example branch and different projects, seems to be working :+1:

Thanks for the effort and please share your thoughts on my pr!