React Router Gets Stuck on Certain Route When Redirecting Directly After Refresh

Question

I'm using a React and Typescript with a Crema template. I was able to figure their routing configuration and successfully implemented more routes on several different pages.

My Issue

But I just encountered a bug where if I refresh the page and click on a nav item to redirect me to a different page, the URL changes to that new route for a split second and then changes right back to the page I was on before refreshing. At this point my entire application is stuck in this awkward state where I can't redirect to any other page without manually typing out the URL and pressing enter. I've created a demo GIF here.

My Question

Am I dealing with a unique bug or has someone already had this issue and resolved it? Any guidance in the right direction would be greatly & humbly appreciated.

My Configuration (if this helps)

Each of my nav items have it's own module folder with a corresponding page config index.tsx file and a 'Pages' folder that contain the page components

import React from 'react';

export const easystoreAppsPagesConfig = [
    {
        auth: ['user'],
        routes: [
            {
                path: '/easystore-apps/easystore-pro',
                component: React.lazy(() => import('./Pages/EasystoreProPage')),
            },
            {
                path: '/easystore-apps/easystore-dash',
                component: React.lazy(() => import('./Pages/EasystoreDashPage')),
            },
            {
                path: '/easystore-apps/easystore-eats',
                component: React.lazy(() => import('./Pages/EasystoreEatsPage')),
            }
        ]
    }
];

All of these page configs get imported to a route component that creates the routes:

import * as React from 'react';
import { Redirect } from 'react-router-dom';

import { createRoutes } from '../@crema/utility/Utils';
import { dashboardPagesConfig } from './dashboard';
import { detailsPagesConfig } from './details';
import { newsletterPagesConfig } from './newsletter';
import { rebatePagesConfig } from './rebate';
import { merchandisePagesConfig } from './merchandise';
import { pointOfSalePagesConfig } from './pointOfSale';
import { programsPagesConfig } from './programs';
import { servicesPagesConfig } from './services';
import { easystoreAppsPagesConfig } from './easystoreApps';
import { errorPagesConfigs } from './errorPages';
import { authRouteConfig } from './auth';
import { initialUrl } from '../shared/constants/AppConst';

const routeConfigs = [
    ...dashboardPagesConfig,
    ...detailsPagesConfig,
    ...newsletterPagesConfig,
    ...rebatePagesConfig,
    ...merchandisePagesConfig,
    ...pointOfSalePagesConfig,
    ...programsPagesConfig,
    ...servicesPagesConfig,
    ...easystoreAppsPagesConfig,
    ...errorPagesConfigs,
    ...authRouteConfig,
];

const routes = [
    ...createRoutes(routeConfigs), // found in template utils
    {
        path: '/',
        exact: true,
        component: () => <Redirect to={initialUrl} />,
    },
    {
        component: () => <Redirect to='/error-pages/error-404' />,
    },
];

export default routes;

The route component also imports a couple of functions to help create the routes

export const createRoutes = (routeConfigs: any[]) => {
    let allRoutes: any[] = [];
    routeConfigs.forEach(config => {
        allRoutes = [...allRoutes, ...setRoutes(config)];
    });
    return allRoutes;
};

export const setRoutes = (config: any) => {
    let routes = [...config.routes];
    if (config.auth) {
       routes = routes.map(route => {
          let auth = route.auth
             ? [...config.auth, ...route.auth]
             : [...config.auth];
          return {...route, auth};
       });
    }

    return [...routes];
};

The template then uses a ContentView component to render all of the routes:

import * as React from 'react';
import { useContext } from 'react';
import {renderRoutes} from 'react-router-config';
import {useLocation} from 'react-router-dom';
import {AppSuspense} from '../../index';
import routes from '../../../modules';
import Scrollbar from '../Scrollbar';
import Box from '@material-ui/core/Box';
import {RouteTransition} from '../../../shared/constants/AppEnums';
import AppContextPropsType from '../../../types/AppContextPropsType';
import { Grid } from '@material-ui/core';

const ContentView = () => {

  return (
      <Scrollbar>
        <Grid container spacing={3}>
            <Grid xs={12} item md={9}>
                <Grid container>
                    <Grid item xs>
                        <Box
                            display='flex'
                            flex={1}
                            flexDirection='column'
                              className='main-content-view'>
                            <AppSuspense>
                                    <TransitionWrapper>{renderRoutes(routes)}</TransitionWrapper>
                            </AppSuspense>

                        </Box>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} md={3}>
            
            </Grid>
        </Grid>
      <AppFooter />
    </Scrollbar>
  );
};

export default ContentView;

React Router Gets Stuck on Certain Route When Redirecting Directly After Refresh

0 Answers0