React中如何通过NavLink传递props并在Home指定区域渲染对应组件

你可以通过父组件状态托管当前选中组件标识 + 子组件点击传值的方式实现，不需要跳转页面，具体修改如下：

1. 修改Home组件 #

首先在Home组件内添加状态存储当前选中的组件名，同时定义更新状态的方法传递给LeftNav，最后在content区域根据状态值匹配渲染对应组件：

import React, { useState } from 'react';
import TopNav from '../components/nav/TopNav';
import LeftNav from '../components/nav/LeftNav';
import Title from '../components/nav/Title';
// 导入你需要渲染的对应组件
import Presentation from './components/Presentation';
import Competences from './components/Competences';
import Experiences from './components/Experiences';
import Formations from './components/Formations';
import Passions from './components/Passions';

const Home = () => {
  // 初始化默认选中的组件，可根据需求调整
  const [activeComponent, setActiveComponent] = useState('presentation');

  // 定义组件渲染映射表，比if/else判断更简洁
  const componentMap = {
    presentation: <Presentation />,
    competences: <Competences />,
    experiences: <Experiences />,
    formations: <Formations />,
    passions: <Passions />
  }

  return (
    <div className="home">
      <TopNav/>
      {/* 把更新状态的方法传给LeftNav组件 */}
      <LeftNav onNavChange={setActiveComponent} activeComponent={activeComponent}/>
      <Title/>
      <div className="homeContent">
        <div id="topic">
          <h1>Bonjour</h1>
        </div>
        <div id="content">
          {/* 根据当前状态渲染对应组件 */}
          {componentMap[activeComponent]}
        </div>
      </div>
    </div>
  );
};

export default Home;

2. 修改LeftNav组件 #

接收父组件传递的方法，点击导航时传递对应组件标识，同时阻止默认跳转行为避免页面刷新：

import React from 'react';
import { NavLink } from 'react-router-dom';

// 接收父组件传的参数
const LeftNav = ({ onNavChange, activeComponent }) => {
  // 点击导航的处理函数
  const handleNavClick = (componentName, e) => {
    // 阻止默认跳转行为
    e.preventDefault();
    // 调用父组件的方法更新选中的组件
    onNavChange(componentName);
  }

  return (
    <div className="leftNavigation">
      <div className="leftNavigationBackground"></div>
      <div className="leftNavigationContent">
        <NavLink 
          to="/" 
          onClick={(e) => handleNavClick('presentation', e)}
          className={activeComponent === 'presentation' ? 'nav-active' : ''}
          exact
        >
          Présentation
        </NavLink>
        <NavLink 
          exact 
          to="/" 
          onClick={(e) => handleNavClick('competences', e)}
          className={activeComponent === 'competences' ? 'nav-active' : ''}
        >
          Compétences
        </NavLink>
        <NavLink 
          exact 
          to="/" 
          onClick={(e) => handleNavClick('experiences', e)}
          className={activeComponent === 'experiences' ? 'nav-active' : ''}
        >
          Expériences
        </NavLink>
        <NavLink 
          exact 
          to="/" 
          onClick={(e) => handleNavClick('formations', e)}
          className={activeComponent === 'formations' ? 'nav-active' : ''}
        >
          Formations
        </NavLink>
        <NavLink 
          exact 
          to="/" 
          onClick={(e) => handleNavClick('passions', e)}
          className={activeComponent === 'passions' ? 'nav-active' : ''}
        >
          Passions
        </NavLink>
      </div>
    </div>
  );
};

export default LeftNav;

可选优化 #

如果需要支持刷新页面后保留当前选中的组件，可以把选中的组件标识存在路由state或者url参数中，配合useLocation、useNavigate读取和更新参数即可。

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