React应用报错No routes matched location "/wear" 求问题排查

1. 路由路径存在多余空格 #

你的Route配置里path="/wear "末尾多了一个空格，实际访问的路径是/wear，两者不匹配，导致路由找不到。

修复代码：

<Route path="/wear" element={<Wear />} />

注：react-router-dom v6+ 已不需要exact属性，默认就是精确匹配

2. 路由配置位置错误 #

你把<Routes>和<Route>放在了Header组件里，不符合React Router的常规用法。路由应该放在应用的根层级（比如App.js主组件），Header只负责提供导航链接即可。

调整后的App.js示例：

import { Routes, Route } from "react-router-dom";
import Header from "./Header";
import Wear from "./pages/Wear";

function App() {
  return (
    <>
      <Header />
      <Routes>
        <Route path="/wear" element={<Wear />} />
        {/* 其他路由统一放在这里 */}
      </Routes>
    </>
  );
}

export default App;

Header组件修改：

import { Link } from "react-router-dom";

function Header() {
  return (
    <li className="nav-item">
      <Link className="whiteNavbar nav-link active" to="/wear">
        Одежда
      </Link>
    </li>
  );
}

export default Header;

3. 使用a标签的优化建议 #

原代码用<a>标签跳转会触发整页刷新，不符合单页应用特性，建议改用react-router-dom提供的<Link>组件实现无刷新跳转。

补充：Wear.js代码补全 #

你提供的Wear.js代码不完整，缺少最外层函数定义，补全后如下：

function Wear() {
  return (
    <div>
      <div className="productTitle d-flex justify-content-between">
        <div className="cardText">Толстовка з капюшоном Polar No Complies Forever</div>
        <div className="cardPrice">UAH 3 600</div>
      </div>
    </div>
  );
};

export default Wear;

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