Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React router dom v6.26.1 changes url but not re-render the component

I’m having an issue with the page refresh after, when clicking on the button url gets changed in the browser but the page doesn’t refresh the correct component, no browser error no terminal error, everything is good at the code level.

<BrowserRouter>
  <Suspense fallback={<Loader />}>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/login-otp" element={<LoginOtp />} />
      <Route path="*" element={<Error />} />
    </Routes>
  </Suspense>
</BrowserRouter>

Below is the Redux-saga method call where exactly I’m trying to push the URL on OTP page after API success as I say URL is changing but OTP page does not re-render the UI.

import axios from 'axios';
import { put, call } from 'redux-saga/effects';
import { push } from 'react-router-redux';
function* submitEmail(action: any) {
    try {
        const payload = {
            username: 'emilys',
            password: 'emilyspass',
            expiresInMins: 30,
        };
        const http: [string, object] = [`https://dummyjson.com/auth/login`, payload];
        const { data: res } = yield call(axios.post, ...http);
        if (res?.token) {
            yield put(push('/login-otp'));
        } else {
            console.log("res:: ", res)
        }
    } catch (e) {
        console.log("error:: ", e)
    }
}

this is how I set up Redux config

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { createInjectorsEnhancer } from 'redux-injectors';
import { connectRouter } from 'connected-react-router';
import { routerMiddleware } from 'react-router-redux';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();

const staticReducers = {
  router: connectRouter(history),
}

function createReducer(asyncReducers?: any) {
  return combineReducers({
    ...staticReducers,
    ...asyncReducers
  })
}


export default function configureStore() {
  const sagaMiddleware = createSagaMiddleware();
  const runSaga = sagaMiddleware.run;
  const composeEnhancers =
    process.env.NODE_ENV !== 'prod' &&
      typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__<any>({
        shouldHotReload: false,
      })
      : compose;

  const injectEnhancer = createInjectorsEnhancer({
    createReducer,
    runSaga,
  })

  const store: any = createStore(
    createReducer(),
    composeEnhancers(
      applyMiddleware(
        sagaMiddleware,
        routerMiddleware(history)
      ),
      injectEnhancer
    )
  );

  store.asyncReducers = {};

  return store;
};

index.tsx file

import configureStore from './path';
const store = configureStore();
    const root = ReactDOM.createRoot(
      document.getElementById('root') as HTMLElement
    );
    root.render(
      <React.StrictMode>
        <Provider store={store}>
              <App />
        </Provider>
      </React.StrictMode>
    );

yield put(push(‘/login-otp’)); –> this make the route update but not update UI.

Tags:

2

Answers


  1. 0

    I can’t find the exact documentation for this version, but I assume <Routes> is valid and it is not replaced by <Route>. In either case, you are missing <Outlet/>. So your code should look like

    <BrowserRouter>
      <Suspense fallback={<Loader />}>
          <Route element={<Outlet/>}>
            <Route path="/login" element={<Login />} />
            <Route path="/login-otp" element={<LoginOtp/>} />
            <Route path="*" element={<Error />} />
          </Route>
      </Suspense>
</BrowserRouter>
    Login or Signup to reply.
  2. 0

    Issue

    React-Router-Redux is very old and deprecated, their repo points you to Connected-React-Router, and it’s not even compatible with the last previous React-Router-DOM version.

    Project Deprecated

    This project is no longer maintained. For your Redux <-> Router
    syncing needs with React Router 4+, please see one of these libraries
    instead:

    • connected-react-router

    ⚠️ This repo is for react-router-redux 4.x, which is only compatible
    with react-router 2.x and 3.x

    Unfortunately at this point in time Connected-React-Router is also a dead project and hasn’t been updated to be compatible with React-Router-Dom v6.

    Solution Suggestion

    The current/modern replacement library for connecting RRDv6 to Redux is Redux-First-History.

    You are also using old/outdated Redux code. Modern Redux is written using Redux-Toolkit. It’s highly recommended to update to RTK.

    Here’s an example modern refactor/implementation:

    • Create a Redux store with router reducer & middleware integrated (I think this captures all/most of your old implementation):

      import { combineReducers } from 'redux';
import { configureStore } from "@reduxjs/toolkit";
import { createReduxHistoryContext } from "redux-first-history";
import createSagaMiddleware from 'redux-saga';
import { createInjectorsEnhancer } from 'redux-injectors';
import { createBrowserHistory } from 'history';

const {
  createReduxHistory,
  routerMiddleware,
  routerReducer
} = createReduxHistoryContext({ history: createBrowserHistory() });

const staticReducers = {
  // ... other root-level reducers ...
  router: routerReducer,
}

const createReducer = (asyncReducers?: any) => combineReducers({
  ...staticReducers,
  ...asyncReducers
});

const sagaMiddleware = createSagaMiddleware();
const runSaga = sagaMiddleware.run;

const injectEnhancer = createInjectorsEnhancer({
  createReducer,
  runSaga,
});

export const store = configureStore({
  reducer: createReducer(),
  middleware: getDefaultMiddleware => 
    getDefaultMiddleware().concat(routerMiddleware, sagaMiddleware),
  enhancers: getDefaultEnhancers =>
    getDefaultEnhancers().concat(injectEnhancer),
});

store.asyncReducers = {};

export const history = createReduxHistory(store);

    • Import the store and history object and instantiate and wrap your app in a HistoryRouter:

      import { Provider } from "react-redux";
import { unstable_HistoryRouter as Router } from 'react-router';
import { history, store } from './path';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router history={history}>
        <App />
      </Router>
    </Provider>
  </React.StrictMode>
);

      App.tsx – remove the router since it is rendered higher in the ReactTree now:

      <Suspense fallback={<Loader />}>
  <Routes>
    <Route path="/login" element={<Login />} />
    <Route path="/login-otp" element={<LoginOtp />} />
    <Route path="*" element={<Error />} />
  </Routes>
</Suspense>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search