React页面仅显示导航栏与页脚问题求助

你的路由配置中，根路径/对应的Layout组件下没有设置默认子路由。当访问/时，Outlet没有可渲染的内容，所以中间区域为空。当前Home组件仅在访问/home时才会显示，但你希望首页（/）直接展示Home内容。

两种简单修复方式，任选其一即可：

方式一：设置默认子路由（推荐） #

修改AppRoutes中的Home路由，添加index属性并移除path="/home"，这样访问根路径/时会自动渲染该子路由：

import {Route, Routes} from "react-router-dom";
import Home from "../../views/Home";
import Menu from "../../views/Menu";
import ContactForm from "../../views/ContactForm";
import Layout from "../layout/Layout"

const AppRoutes = () => {
  return (
    <div>
        <Routes>
            <Route path="/" element={<Layout/>}>
                {/* 标记为默认子路由 */}
                <Route index element={<Home/>}/>
                <Route path="/menu" element={<Menu/>}/>
                <Route path="/contacto" element={<ContactForm/>}/>
            </Route>
        </Routes>
    </div>
  )
}

export default AppRoutes

方式二：重定向根路径到/home #

若想保留/home路径，同时让/自动跳转到/home，可添加重定向路由：

首先导入Navigate组件：

import {Route, Routes, Navigate} from "react-router-dom";

然后在根路由下添加重定向规则：

const AppRoutes = () => {
  return (
    <div>
        <Routes>
            <Route path="/" element={<Layout/>}>
                <Route path="/home" element={<Home/>}/>
                <Route path="/menu" element={<Menu/>}/>
                <Route path="/contacto" element={<ContactForm/>}/>
                {/* 根路径重定向到/home */}
                <Route index element={<Navigate to="/home"/>}/>
            </Route>
        </Routes>
    </div>
  )
}

修改后重启npm run dev，访问根路径时，中间区域会正常显示Home组件内容，导航栏和页脚也能保持正常渲染。

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