React项目如何在Home组件内配置路由实现组件跳转

基于 React Router v6 实现，不需要单独抽离全局路由文件，所有配置直接写在Home组件内即可：

• 首先安装路由依赖，执行命令：
  npm install react-router-dom
• 先在项目根入口文件（通常是src/index.js）包裹路由上下文，保证整个应用能拿到路由能力：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import Home from './Home';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Home />
  </BrowserRouter>
);

• 修改Home组件代码，把原有静态导航替换为路由导航组件，同时配置路由出口：

// src/Home.js
import { NavLink, Routes, Route, Navigate } from 'react-router-dom';
import RecipeList from './RecipeList';
// 保留你原有导入：推荐食谱模块、页脚、样式文件等

export default function Home() {
  return (
    <div className="app">
      {/* 顶部导航栏：放在路由出口外侧，所有页面共享 */}
      <nav className="top-nav">
        <div className="nav-menu">
          <NavLink to="/" end>Home</NavLink>
          <NavLink to="/recipes">Recipes</NavLink>
          <NavLink to="/favourites">Favourites</NavLink>
          <NavLink to="/personal-list">Personal List</NavLink>
          <NavLink to="/create-recipe">Create Recipe</NavLink>
        </div>
        <div className="nav-btn-group">
          <button className="btn">Sign Up</button>
          <button className="btn btn-primary">Log in</button>
        </div>
      </nav>

      {/* 路由出口：匹配路径时自动渲染对应组件 */}
      <main>
        <Routes>
          {/* 根路径渲染原首页推荐内容 */}
          <Route path="/" element={
            <div className="recommend-wrap">
              {/* 这里直接放你原来写的首页推荐食谱模块代码 */}
            </div>
          } />
          {/* /recipes 路径渲染食谱列表组件 */}
          <Route path="/recipes" element={<RecipeList />} />
          {/* 后续其他功能组件写完直接按相同格式补路由即可 */}
          {/* <Route path="/favourites" element={<Favourites />} />
          <Route path="/personal-list" element={<PersonalList />} />
          <Route path="/create-recipe" element={<CreateRecipe />} /> */}

          {/* 兜底重定向：所有不匹配的路径跳回首页 */}
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </main>

      {/* 页脚：放在路由出口外侧，所有页面共享 */}
      <footer className="app-footer">
        {/* 这里保留你原来写的页脚代码 */}
      </footer>
    </div>
  )
}

关键配置说明 #

1. 导航使用NavLink组件而非原生a标签，它会自动给当前激活的菜单项加active类名，直接写CSS即可实现菜单高亮效果：

.top-nav a.active {
  color: #ff7043;
  font-weight: 600;
}

2. 导航栏、页脚放在Routes标签外部，切换路由时这两个部分不会重复渲染，只有主内容区会随路径切换更新，符合常规多页面应用的交互体验。
3. 如果后续需要做登录拦截（比如收藏、个人清单、创建食谱功能需要登录后访问），直接在对应路由的element位置嵌套权限判断组件即可，不需要改动整体路由结构。
4. 所有路由规则直接写在Home组件内，不需要额外维护独立的路由配置文件，结构更直观，适合中小型项目快速开发。

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