I have this problem and I don't know how to solve it, the Approuter have 2 routes, the public (login) and the private (DashboardRoutes) who have the other routes. Dashboard only load the first component and its all.

the code is it

    import React, { useEffect } from 'react'
    import { useDispatch, useSelector } from 'react-redux'
    import {
      BrowserRouter as Router,
      
      Switch,
    } from "react-router-dom";
    
    import { LoginScreen } from '../components/LoginScreen';
    import { DashboardRoutes } from './DashboardRoutes';
    import { PrivateRoute } from './PrivateRoute';
    import { PublicRoute } from './PublicRoute';
    import { startChecking } from '../actions/auth'
    
    
    
    export const AppRouter = () => {
      
      const { checking, uid } = useSelector( state => state.auth );
      const dispatch = useDispatch();
      
      useEffect(() => {
          
        dispatch (startChecking());
    
      }, [dispatch])
      
      if (checking) {
        return <div>Checking...</div>
      }
    
      console.log(checking)
      console.log(uid)
      
      return (
      
        
        <Router>
          <div>
            <Switch>
              
              <PublicRoute 
                exact 
                path="/login" 
                component={LoginScreen} 
                isAuthenticated={ !!uid } 
                />
              
              <PrivateRoute 
                exact 
                path="/" 
                component={DashboardRoutes}
                isAuthenticated={ !!uid } 
                />
      
            </Switch>
          </div>
        </Router>
        
      )
    }

import React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import { CharacterScreen } from '../components/screen/CharacterScreen'
import { FavoritesScreen } from '../components/screen/FavoritesScreen'
import { FilmScreen } from '../components/screen/FilmScreen'
import { PlanetsScreen } from '../components/screen/PlanetsScreen'
import { StarHome } from '../components/StarHome'

import { Navbar } from '../components/ui/Navbar'


export const DashboardRoutes = () => {
   
  return (
        
    <>
      <Navbar />  

        <div className='container mt-2'>
          <Switch>
              <Route exact path='/starhome' component={ StarHome } />
              <Route exact path='/planets' component={ PlanetsScreen } />
              <Route exact path='/character' component={ CharacterScreen } />
              <Route exact path='/films' component={ FilmScreen } />
              <Route exact path='/favorites' component={ FavoritesScreen } />
              {/* <Route exact path='/' component={ StarHome } /> */}
               

          </Switch>
        </div>
      </>
    )
}

import React from 'react';
import PropTypes from 'prop-types';

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

console.log("esto es el public")

export const PublicRoute = ({
    isAuthenticated,
    component: Component,
    ...rest
}) => {

    return (
        <Route { ...rest }
            component={ (props) => (
                ( isAuthenticated )
                    ? ( <Redirect to="/" /> )
                    : ( <Component { ...props } /> )
            )}
        
        />
    )
}

PublicRoute.propTypes = {
    isAuthenticated: PropTypes.bool.isRequired,
    component: PropTypes.func.isRequired
}

import React from 'react';
import PropTypes from 'prop-types';

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

console.log("Este es el private")
export const PrivateRoute = ({
    isAuthenticated,
    component: Component,
    ...rest
}) => {

    return (
        <Route { ...rest }
            component={ (props) => (
                ( !isAuthenticated )
                    ? ( <Component { ...props } /> )
                    : ( <Redirect to="/login" /> )
            )}
        
        />
    )
}

PrivateRoute.propTypes = {
    isAuthenticated: PropTypes.bool.isRequired,
    component: PropTypes.func.isRequired
}

in case you need to see the dispatch

export const startChecking = () => {
    return async ( dispatch ) => {
    
    const resp = await fetchConToken( 'auth/renew');
    const body = await resp.json();

    if( body.ok ) {
        localStorage.setItem('token', body.token);
        localStorage.setItem('token-init-date', new Date().getTime() );
        
        dispatch( login ({
            uid: body.uid,
            name: body.name
        }) )
    } else {
        dispatch( checkingFinish() );
    }
        
    }
}

only charge the navbar now. I did other tests where it only loads the navbar with the starhome but I couldn't continue from there

I hope you can help me