Trying to migrate from Router v3 to v5 , doesnt seem to work at all , dont know whats the issue

[roshmani]

The project uses redux integration ,

Main component with route looks something like this

const Initial = (props) => {
    const {settings, userManager} = props;
    const {AppContextPath, AppType} = settings;
    const store = configureStore(userManager, {
        settings
    });

    const userIsAuthenticated = connectedReduxRedirect({
        redirectPath: `${AppContextPath}login`,
        authenticatedSelector: (state) => state.oidc.user !== null,
        authenticatingSelector: (state) => state.oidc.isLoadingUser,
        redirectAction: replace,
        wrapperDisplayName: 'UserIsAuthenticated'
    });

    const StandardAuthentication = userIsAuthenticated(({children, ...props}) =>
        React.cloneElement(children, props)
    );


    const SecuredRoutes = ({component: Component, ...rest}) => {
        return (
            <Route
                {...rest}
                render={(props) => {
                    <StandardAuthentication>
                        <>
                            <Component {...props} />
                        </>
                    </StandardAuthentication>;
                }}
            />
        );
    };

    return (
        <ErrorBoundary>
            <Provider store={store}>
                <OidcProvider store={store} userManager={userManager}>
                    <ConnectedRouter history={history} >
                        <>
                            {' '}
                            {/* short syntax for React.Fragment*/}
                            <Switch>
                               
                                <Route
                                    path={`${AppContextPath}login(/:uuid)`}
                                    render={() => (
                                        <Login userManager={userManager} />
                                    )}
                                />
                                <Route
                                    path={`${AppContextPath}callback`}
                                    render={() => (
                                        <Callback userManager={userManager} />
                                    )}
                                />
                                <Route
                                    path={`${AppContextPath}callback`}
                                    render={() =>
                                        {userIsAuthenticated(App)}
                                    }
                                />
                                {/*<SecuredRoutes
                                    exact
                                    path="/"
                                    render={() => <App/>
                                />*/}
                                <Route component={NotFoundExternal} />
                            </Switch>
                        </>
                    </ConnectedRouter>
                </OidcProvider>
            </Provider>
        </ErrorBoundary>

    );
};

configureStore function looks like this -

export const history = createBrowserHistory();

export default function configureStore(
    userManager,
    preloadedState = {settings: {AppContextPath: '/'}}
) {
    const enhancers = [];
    if (process.env.NODE_ENV !== 'production') {
        const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;

        if (typeof devToolsExtension === 'function') {
            enhancers.push(devToolsExtension());
        }
    }

    const store = createStore(
        createRootReducer(history),
        preloadedState,
        compose(
            applyMiddleware(
                routerMiddleware(history),
                thunkMiddleware,
                reduxPackMiddleware,
                mainError
            ),
            ...enhancers
        )
    );

     loadUser(store, userManager);

    return store;
}; 

and createRoot reducer as follows:-

const createRootReducer = (history) =>
    combineReducers({
        router: connectRouter(history),
        ...reducers,
        ...baseReducers
    });

export default createRootReducer;
`

versions of the packages used are: "connected-react-router": "6.8.0", "react-dom": "16.13.1", "redux": "4.0.5", "redux-auth-wrapper": "3.0.0", "redux-oidc": "3.1.7", "react-redux": "7.2.1", "react-router-dom": "5.2.0", "react-router-redux": "4.0.8"

Route is always going to Notfound route , what s possibly wrong here ? i am new to this please help.

[shaltaev]

Please print version of history you use. You might install 5 instead 4.

history 5 will be used with react-router 6

[roshmani]

i had version history: "history": "4.10.1", installed 5.0.0 , still doesnt seem to work .