React路由点击时在父组件中条件渲染子组件的实现问题

针对你从Vue转React后遇到的路由切换时父组件内指定区域渲染对应子组件的需求，这里提供两种实用方案：

方案一：通过useLocation钩子判断路径渲染 #

利用React Router的useLocation获取当前路由路径，再通过条件判断或对象映射渲染对应子组件，适合需要在渲染前做额外逻辑处理的场景。

import { useLocation, Link } from 'react-router-dom';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';

// 假设你的菜单数组
const menuItems = [
  { name: '子组件1', path: '/child1' },
  { name: '子组件2', path: '/child2' }
];

function WrapperComp() {
  const { pathname } = useLocation();

  // 方式1：if-else 条件判断（适合少量组件）
  let currentChild;
  if (pathname === '/child1') {
    currentChild = <ChildComponent1 />;
  } else if (pathname === '/child2') {
    currentChild = <ChildComponent2 />;
  } else {
    currentChild = <div>请选择有效菜单选项</div>;
  }

  // 方式2：对象映射（适合多组件场景，更简洁）
  // const componentMap = {
  //   '/child1': <ChildComponent1 />,
  //   '/child2': <ChildComponent2 />
  // };
  // const currentChild = componentMap[pathname] || <div>请选择有效菜单选项</div>;

  return (
    <div className="wrapper">
      {/* 导航菜单区域 */}
      <nav>
        {menuItems.map(item => (
          <Link key={item.path} to={item.path}>{item.name}</Link>
        ))}
      </nav>

      {/* 指定的条件渲染区域 */}
      <div className="content-container">
        {currentChild}
      </div>
    </div>
  );
}

export default WrapperComp;

方案二：用Route组件直接在指定区域匹配渲染 #

这是React Router原生推荐的方式，无需手动判断路径，直接在目标区域通过Routes和Route匹配路由并渲染组件，逻辑更清晰。

import { Routes, Route, Link } from 'react-router-dom';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';

const menuItems = [
  { name: '子组件1', path: '/child1' },
  { name: '子组件2', path: '/child2' }
];

function WrapperComp() {
  return (
    <div className="wrapper">
      {/* 导航菜单区域 */}
      <nav>
        {menuItems.map(item => (
          <Link key={item.path} to={item.path}>{item.name}</Link>
        ))}
      </nav>

      {/* 指定的条件渲染区域 */}
      <div className="content-container">
        <Routes>
          <Route path="/child1" element={<ChildComponent1 />} />
          <Route path="/child2" element={<ChildComponent2 />} />
          <Route path="/" element={<div>请选择菜单选项</div>} />
        </Routes>
      </div>
    </div>
  );
}

export default WrapperComp;

注意事项 #

• 确保项目外层已经包裹了BrowserRouter（通常在根组件如App.jsx中），否则路由相关钩子和组件无法正常工作：

import { BrowserRouter } from 'react-router-dom';
import WrapperComp from './WrapperComp';

function App() {
  return (
    <BrowserRouter>
      <WrapperComp />
    </BrowserRouter>
  );
}

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