React Router路由加载异常：Dashboard仅加载首个组件求助

问题根源分析 #

1. PrivateRoute认证逻辑完全颠倒：当前未认证时渲染私有组件，认证后反而跳转到登录页，与需求完全相反。
2. 父路由设置了exact严格匹配：AppRouter中PrivateRoute的path="/"加了exact，导致嵌套子路由（如/starhome）无法匹配父路由，DashboardRoutes无法渲染子组件。
3. 缺少默认路由重定向：DashboardRoutes中没有配置根路径/的对应组件，访问根路径时无内容加载，仅显示Navbar。

具体修复步骤 #

1. 修正PrivateRoute的认证逻辑 #

将PrivateRoute中的条件判断反转，确保已认证用户才能访问私有路由，未认证用户跳转到登录页：

import React from 'react';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

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
}

2. 移除PrivateRoute的exact属性 #

AppRouter中，私有路由的path="/"不能加exact，否则嵌套子路由无法匹配父路由：

// AppRouter.js中修改PrivateRoute部分
<PrivateRoute 
    path="/"  // 移除exact属性
    component={DashboardRoutes}
    isAuthenticated={ !!uid } 
/>

3. 配置DashboardRoutes的默认路由 #

在DashboardRoutes的Switch中添加根路径/的Route，同时补充未匹配路径的重定向规则：

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>
                    {/* 根路径默认加载StarHome */}
                    <Route exact path='/' component={ StarHome } />
                    <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 } />
                    {/* 所有未匹配路径重定向到首页 */}
                    <Redirect to="/" />
                </Switch>
            </div>
        </>
    )
}

验证修复效果 #

完成上述修改后：

• 已认证用户访问根路径/会直接加载StarHome，点击Navbar中的其他路由能正常切换组件。
• 未认证用户访问私有路由会自动跳转到/login页面。
• 所有未定义的路径会重定向到首页。

内容的提问来源于stack exchange，提问作者Federico Grandinetti