Why nested routes don't work in react?

Question

React

I do routing

import React, { useEffect, useContext }         from 'react';
import { createMuiTheme }                       from '@material-ui/core/styles';
import { ThemeProvider }                        from '@material-ui/styles';
import { Switch, Route, Redirect }              from 'react-router-dom';
import Loader                                   from './UI/Loader/Loader';
import Auth                                     from './pages/Auth/Auth';
import MainPage                                 from './pages/MainPage/MainPage';
import { AuthContext }                          from './context/AuthContext/AuthContext';

const Application = () => {

    const {loadingIsAuth, authorized, isAuth } = useContext(AuthContext);

    const theme = createMuiTheme({ /*еще не заданы*/
        darkBlue: '#1B3F7F',
        //secondary: '#DB001B',
    });

    useEffect(() => {
        authorized();
    }, []);

    if(loadingIsAuth) {
        return <Loader />
    }

    return (
        <ThemeProvider theme={theme}>
            <Switch>
                <Route exact path='/'>
                    {isAuth ? <MainPage /> : <Redirect to={'/login'} />}
                </Route>
                <Route exact path='/login' component={Auth} />
            </Switch>
        </ThemeProvider>
    )
};

export default Application;

When authorizing, I redirect to the MainPage component, here it is:

import React                                    from 'react';
import { Switch, Route, Redirect }              from 'react-router-dom';
import Header                                   from '../../components/Header/Header';
import LeftMenu                                 from '../../components/LeftMenu/LeftMenu';
import List                                     from '../../pages/List/List';
import {useStyles}                              from './style';

const MainPage = () => {
    const classes = useStyles();

    return (
        <div className={classes.wrapContent}>
            <Header />
            <div className={classes.bodyContent}>
                <LeftMenu />
                <div>
                    <Switch>
                        <Route exact path='/'>
                            <Redirect to={'/list'} />
                        </Route>
                        <Route exact path={'/list'} component={List} />
                    </Switch>
                </div>
            </div>
        </div>
    )
};

export default MainPage;

However, the page is empty, the List component is not loaded.

Answer 1

and if you look at this in MainPage, then there will be the correct and necessary pathname '/' ?

import {  useLocation  } from "react-router-dom";

...
const location = useLocation();
console.log(location)