使用useNavigate钩子后Home组件无法渲染的问题求助

核心问题1：嵌套路由未使用<Outlet /> #

你的Layout作为父路由的渲染组件，但没有引入并使用React Router的<Outlet />组件——这是嵌套路由中子路由内容的出口。父路由的布局组件必须通过<Outlet />来展示子路由对应的元素，否则不管URL怎么变，都只会显示Layout自身的内容（要么Sidebar要么LoginPage），永远不会渲染Home组件。

核心问题2：登录状态未持久化 #

LoginPage的redirectToHome方法只做了页面跳转，但没有把用户ID存入localStorage。Layout组件在挂载时会读取localStorage里的userId，如果没有值，就会一直显示LoginPage，哪怕URL已经变成/home。

额外问题：路由配置冗余 #

AppRoutes里的根路由（path="/"）重复渲染了Layout，而App组件中已经把Layout作为父路由的包裹组件，这会导致Layout被嵌套渲染，逻辑混乱。

修改后的代码示例 #

1. 修正Layout.jsx

import { useState, useEffect } from 'react';
import { useNavigate, Outlet } from 'react-router-dom'; // 引入Outlet

const Layout = () => {
    const [userId, setUserId] = useState(null);
    const navigate = useNavigate();

    const getUserIdFromLocalStorage = () => {
        // localStorage.getItem是同步方法，不需要async/await
        const id = localStorage.getItem('userId');
        if (id) {
            setUserId(id);
        } else {
            // 如果未登录，直接跳转到登录页
            navigate('/login', { replace: true });
        }
    };

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

    // 已登录时，渲染侧边栏+子路由内容（通过Outlet）
    if (userId) {
        return (
            <>
                <Sidebar />
                <Outlet /> {/* 子路由内容会在这里渲染 */}
            </>
        );
    }

    // 未登录时，显示LoginPage
    return <LoginPage />;
};

export default Layout;

2. 修正LoginPage.jsx

import { useNavigate } from 'react-router-dom';

const LoginPage = () => {
    const navigate = useNavigate();

    const redirectToHome = () => {
        // 先存入用户ID到localStorage（实际项目中替换为登录接口返回的真实ID）
        localStorage.setItem('userId', 'user_123');
        // 跳转到首页
        navigate('/home', { replace: true });
    };

    return (
        <div className="bg-dark text-white">
            <button onClick={redirectToHome}>Login</button>
        </div>
    );
};

export default LoginPage;

3. 调整AppRoutes.js

const AppRoutes = [
    // 根路由直接显示登录页
    {
        index: true,
        element: <LoginPage />
    },
    // 受保护的路由组，由Layout包裹
    {
        path: "/",
        element: <Layout />,
        children: [
            { path: "home", element: <Home /> }
        ]
    }
];

export default AppRoutes;

4. 修正App.js

import { Routes, Route } from 'react-router-dom';
import AppRoutes from './AppRoutes';

export default class App extends Component {
    static displayName = App.name;

    render() {
        return (
            <Routes>
                {AppRoutes.map((route, index) => {
                    // 处理嵌套路由
                    if (route.children) {
                        return (
                            <Route key={index} path={route.path} element={route.element}>
                                {route.children.map((childRoute, childIndex) => (
                                    <Route
                                        key={childIndex}
                                        path={childRoute.path}
                                        element={childRoute.element}
                                    />
                                ))}
                            </Route>
                        );
                    }
                    return <Route key={index} path={route.path} element={route.element} />;
                })}
            </Routes>
        );
    }
}

补充说明 #

• React Router的嵌套路由依赖<Outlet />作为子内容的出口，父路由组件必须包含它才能渲染子路由的元素。
• 登录逻辑中，一定要先持久化登录状态（比如存入localStorage或Cookie），再进行页面跳转，否则页面刷新或路由切换后会丢失登录状态。
• 路由配置尽量清晰，避免重复渲染同一组件，减少嵌套层级带来的逻辑混乱。

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