MERN栈电商搜索栏问题：Udemy教程实现遇显示与history报错

你的问题核心是React Router v6和旧版（教程用的v5）的API差异，以下是具体修复步骤：

1. 修正App.js的路由配置 #

你之前把Search组件作为根路由的element，这是错误的——搜索栏应该是全局Header的一部分，不是单独的页面。正确的App.js路由结构应该是：

import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Header from './components/Header'; // 导入Header组件

function App() {
  return (
    <div className="App">
      {/* 全局Header，里面包含Search组件 */}
      <Header />
      <Routes>
        {/* 根路由渲染Home页面 */}
        <Route path="/" element={<Home />} />
        {/* 搜索路由同样渲染Home，用于展示搜索结果 */}
        <Route path="/search/:keyword" element={<Home />} />
        {/* 其他页面路由（比如商品详情、购物车等） */}
      </Routes>
    </div>
  );
}

export default App;

2. 更新Header组件中的Search渲染 #

React Router v6移除了Route的render属性，你不需要再用Route包裹Search组件，直接在Header里引入即可：

// Header.js
import Search from './Search';

const Header = () => {
  return (
    <header className="header">
      {/* 其他Header内容（比如logo、导航栏） */}
      <Search /> {/* 直接渲染搜索栏 */}
    </header>
  );
};

export default Header;

3. 改造Search组件，用useNavigate替代history #

React Router v6不再自动给组件注入history props，需要用useNavigate钩子实现页面跳转：

// Search.js
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const Search = () => {
  const [keyword, setKeyword] = useState('');
  // 用useNavigate获取导航方法
  const navigate = useNavigate();

  const searchHandler = (e) => {
    e.preventDefault();
    if (keyword.trim()) {
      // 替换history.push为navigate
      navigate(`/search/${keyword}`);
    } else {
      navigate('/');
    }
  };

  return (
    <form onSubmit={searchHandler} className="search-form">
      <input
        type="text"
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="输入关键词搜索..."
      />
      <button type="submit">搜索</button>
    </form>
  );
};

export default Search;

问题原因说明 #

• 搜索栏消失：你之前把Search作为根路由的element，导致只有访问根路径时才会渲染Search，且覆盖了Header的全局渲染逻辑，所以搜索栏不显示。
• history未定义：React Router v6彻底移除了路由props（history/location/match）的自动注入，必须通过对应的hooks（useNavigate/useLocation/useParams）来获取路由功能。

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