React Hooks中SVG图标OnClick失效及路由导航问题求助

问题分析 #

• handleClick 中直接返回 <MyAccount /> 无法触发路由跳转，这不是React Router的正确跳转方式
• useNavigate() 报错是因为 MainHeader 组件不在 BrowserRouter 的上下文范围内
• App.js 中使用多个 <Routes> 组件会导致路由配置失效，React Router仅识别第一个 <Routes>

解决方案 #

1. 修正MainHeader组件的跳转逻辑 #

正确使用 useNavigate 实现路由跳转，替代直接渲染组件的错误写法：

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

function MainHeader() {
  const navigate = useNavigate(); // 初始化路由跳转函数

  const handleClick = () => {
    navigate('/my-account'); // 触发跳转到/my-account路径
  };

  return (
    <>
      <Navbar bg="light" className="main-header">
        <Row className="justify-content-md-center align-items-center">
          <Col sm={2}>
            <img
              src="/assets/images/beelittle-logo.webp"
              alt="logo"
              className="logo"
            />
          </Col>
          <Col sm={7}>
            <div className="search-input">
              <input type="text" name="search" placeholder="Search" />
              <div className="search-icon">
                <svg
                  version="1.1"
                  className="dgwt-wcas-ico-magnifier"
                  x="0px"
                  y="0px"
                  viewBox="0 0 51.539 51.361"
                  enable-background="new 0 0 51.539 51.361"
                >
                  <path
                    fill="#444"
                    d="M51.539,49.356L37.247,35.065c3.273-3.74,5.272-8.623,5.272-13.983c0-11.742-9.518-21.26-21.26-21.26 S0,9.339,0,21.082s9.518,21.26,21.26,21.26c5.361,0,10.244-1.999,13.983-5.272l14.292,14.292L51.539,49.356z M2.835,21.082 c0-10.176,8.249-18.425,18.425-18.425s18.425,8.249,18.425,18.425S31.436,39.507,21.26,39.507S2.835,31.258,2.835,21.082z"
                  ></path>
                </svg>
              </div>
            </div>
          </Col>
          <Col sm={3}>
            <div className="d-flex justify-evenly ">
              <div className="d-flex">
                <div onClick={handleClick}>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="28"
                    height="30"
                    viewBox="0 0 28 30"
                    fill="none"
                  >
                    <path
                      d="M13.9789 11.9586C16.9498 11.9586 19.3582 9.55022 19.3582 6.57931C19.3582 3.6084 16.9498 1.2 13.9789 1.2C11.008 1.2 8.59961 3.6084 8.59961 6.57931C8.59961 9.55022 11.008 11.9586 13.9789 11.9586Z"
                      fill="#90D2C2"
                    ></path>
                    <path
                      d="M14.0004 13.2C10.3605 13.2 7.40039 10.2399 7.40039 6.6C7.40039 2.9601 10.3605 0 14.0004 0C17.6403 0 20.6004 2.9601 20.6004 6.6C20.6004 10.2399 17.6403 13.2 14.0004 13.2ZM14.0004 2.475C11.725 2.475 9.87539 4.32465 9.87539 6.6C9.87539 8.87535 11.725 10.725 14.0004 10.725C16.2757 10.725 18.1254 8.87535 18.1254 6.6C18.1254 4.32465 16.2757 2.475 14.0004 2.475Z"
                      fill="black"
                    ></path>
                    <path
                      d="M25.9623 30C25.2792 30 24.7248 29.4456 24.7248 28.7625V24.6375C24.7248 21.6807 22.3191 19.275 19.3623 19.275H8.6373C5.6805 19.275 3.2748 21.6807 3.2748 24.6375V28.7625C3.2748 29.4456 2.7204 30 2.0373 30C1.3542 30 0.799805 29.4456 0.799805 28.7625V24.6375C0.799805 20.3162 4.31595 16.8 8.6373 16.8H19.3623C23.6837 16.8 27.1998 20.3162 27.1998 24.6375V28.7625C27.1998 29.4456 26.6454 30 25.9623 30Z"
                      fill="black"
                    ></path>
                  </svg>
                </div>
                My Account
              </div>
            </div>
          </Col>
        </Row>
      </Navbar>
    </>
  );
}

2. 修正App.js的路由结构 #

将 MainHeader 放入 BrowserRouter 上下文内，并合并所有路由到单个 <Routes> 组件中：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import MainHeader from './MainHeader'; // 替换为你的实际组件路径
import MyAccount from './MyAccount';
import Product from './Product';

function App() {
  return (
    <BrowserRouter>
      <MainHeader /> {/* 放入BrowserRouter内，确保能访问路由上下文 */}
      <Routes>
        <Route path="/my-account" element={<MyAccount />} />
        <Route path="/product" element={<Product />} />
        {/* 可添加首页路由，例如：<Route path="/" element={<Home />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

关键注意事项 #

• 所有使用React Router Hooks（useNavigate、useParams等）的组件，必须被包裹在 BrowserRouter 内部
• 路由配置必须集中在单个 <Routes> 组件中，多个 <Routes> 会导致路由规则失效
• 路由跳转必须通过 navigate 函数（React Router v6）实现，不能直接渲染目标组件

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