ReactJS项目中href路径无法跳转问题求助

• 先安装React Router依赖（React本身没有内置路由功能）：

  npm install react-router-dom
  # 或者用yarn
  yarn add react-router-dom
  

• 在项目根组件（比如main.jsx/App.jsx）配置路由结构：

  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  // 导入你的登录组件，路径根据实际项目结构调整
  import Login from './src/app/auth/login';
  
  function App() {
    return (
      <Router>
        <Routes>
          {/* 配置登录页面的路由 */}
          <Route path="/auth/login" element={<Login />} />
          {/* 其他页面路由也在这里配置 */}
        </Routes>
      </Router>
    );
  }
  
  export default App;
  

• 把原生<a>标签替换成React Router的<Link>组件（这是SPA内导航的正确方式，不会刷新页面）：

  import { Link } from 'react-router-dom';
  
  // 替换原来的<a href="/auth/login">Join Now</a>
  <Link to="/auth/login" className="你的按钮样式类名">Join Now</Link>
  

• 如果需要通过点击事件编程式跳转（比如用标签），可以用useNavigate钩子：

  import { useNavigate } from 'react-router-dom';
  
  function YourComponent() {
    const navigate = useNavigate();
  
    const handleClick = () => {
      navigate('/auth/login');
    };
  
    return (
      <button onClick={handleClick} className="你的按钮样式类名">Join Now</button>
    );
  }
  

为什么原生<a>标签不行？因为原生<a>会触发整个页面刷新，而React Router是客户端路由，需要用它提供的组件/钩子来实现单页应用内的无刷新跳转，同时保证路由状态正确。

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