react如何使用link跳转

使用 React Router 的 Link 组件

在 React 应用中实现页面跳转，通常使用 react-router-dom 库提供的 Link 组件。Link 组件允许在不刷新页面的情况下进行路由切换，适合单页应用（SPA）的场景。

安装 react-router-dom：

npm install react-router-dom

引入 Link 组件并配置路由：

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

传递参数和状态

Link 组件可以通过 state 或 URL 参数传递数据：

<Link 
  to="/user" 
  state={{ id: 123 }} 
>
  User Details
</Link>

在目标组件中通过 useLocation 获取状态：

import { useLocation } from 'react-router-dom';

function User() {
  const location = useLocation();
  const { id } = location.state;
  return <div>User ID: {id}</div>;
}

动态路由跳转

对于动态路由（如 /user/:id），可以使用模板字符串或对象形式的 to 属性：

<Link to={`/user/${userId}`}>User Profile</Link>

// 或使用对象形式
<Link to={{ pathname: '/user', search: '?sort=name' }}>User List</Link>

编程式导航

如果需要通过代码跳转（例如表单提交后），可以使用 useNavigate Hook：

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

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    navigate('/dashboard', { replace: true });
  };

  return <button onClick={handleLogin}>Login</button>;
}

样式和自定义属性

Link 组件支持标准的 HTML 属性（如 className、style）：

<Link 
  to="/contact" 
  className="nav-link" 
  style={{ color: 'blue' }}
>
  Contact
</Link>

注意事项

• Link 必须包裹在 Router 组件内（如 BrowserRouter）。
• 默认情况下，Link 会渲染为 <a> 标签，但保留 SPA 的特性。
• 使用 replace 属性可以替换当前历史记录而非添加新条目（如 navigate('/path', { replace: true })）。