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 })）。
