Компонент маршрута отрисовывается несколько раз, когда маршрут разбивается на несколько файлов.

Question

Проблема в том, что всякий раз, когда я пытаюсь перенести свои маршруты в другой файл и импортировать их в родительский файл (routes. js), всякий раз, когда я пытался перейти к этому перенесенному маршруту, весь макет перерисовывается, и если я сохраните перенесенные маршруты в родительском компоненте маршрута, тогда макет будет отображен один раз, как ожидалось.

Компонент маршрута, в котором все маршруты записаны, как показано ниже

маршруты. js

import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';

import PrivateRoute from './PrivateRoute';

import MainLayout from '../pages/layouts/MainLayout';
import Login from '../components/Login/Login';

import UserList from "../components/User/UserList";
import UserCreate from '../components/User/UserCreate';
import UserEdit from '../components/User/UserEdit';
import UserSetting from '../components/User/UserSetting';


class Main extends Component {
    render() {
        return (
            <Switch>
                <Route exact path='/' component={Login}/>
                
                <PrivateRoute exact path='/user' component={UserList} layout={MainLayout}/>
                <PrivateRoute exact path='/user/create' component={UserCreate} layout={MainLayout}/>
                <PrivateRoute exact path='/user/edit/:id' component={UserEdit} layout={MainLayout}/>
                <PrivateRoute exact path='/user/setting/:id' component={UserSetting} layout={MainLayout}/>

            </Switch>
        )
    }
}

export default Main;

UserRoutes. js

import UserList from "../components/User/UserList";
import UserCreate from '../components/User/UserCreate';
import UserEdit from '../components/User/UserEdit';
import UserSetting from '../components/User/UserSetting';

const UserRoutes = [
    { 
        path        : '/user', 
        component   : UserList, 
    },
    { 
        path        : '/user/create', 
        component   : UserCreate, 
    },
    { 
        path        : '/user/edit/:id', 
        component   : UserEdit, 
    },
    { 
        path        : '/user/setting/:id', 
        component   : UserSetting, 
    },
];

export default UserRoutes;

Теперь, когда я пытаюсь импортировать этот маршрут вместо записанных маршрутов в маршрутах . js, возникает вышеупомянутая проблема.

маршруты. js

import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';

import PrivateRoute from './PrivateRoute';

import MainLayout from '../pages/layouts/MainLayout';
import Login from '../components/Login/Login';

import UserRoutes from './UserRoutes'; 


class Main extends Component {
    render() {
        return (
            <Switch>
                <Route exact path='/' component={Login}/>
                {
                    UserRoutes.map(({ path, component }, key) => 
                        <PrivateRoute exact layout={MainLayout} path={path} component={component} key={key} />
                    )
                }

            </Switch>
        )
    }
}

export default Main;

PrivateRoute. js

import React from 'react';
import {Redirect, Route, withRouter} from 'react-router-dom';

let state_of_state = localStorage["appState"];
let Auth = {};
if (!state_of_state){
    localStorage["appState"] = JSON.stringify({user : {}});
} else {
    Auth = JSON.parse(state_of_state);
}

const PrivateRoute = ({ layout: Layout, component: Component, ...rest }) => (
  <Route {...rest} render={props => {
      const newComponent = Layout ? 
           <Layout><Component {...rest} {...props} /></Layout> 
               : 
           <Component {...props} />;

      return (!_.isEmpty(Auth.user)) ? (
          newComponent
      ) : (
          <Redirect to={{pathname: '/', state: { from: props.location }}} />
      )
  }}/>
);

export default PrivateRoute;

Мне нужно руководство, где я ошибаюсь.