react实现网页跳转
使用 react-router-dom 进行页面跳转
安装 react-router-dom 库：
npm install react-router-dom在根组件（如 App.js）中配置路由：
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}使用 Link 组件跳转
在组件内部使用 Link 实现无刷新跳转：
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to="/about">跳转到关于页</Link>
</div>
);
}使用 useNavigate Hook 编程式跳转
通过事件触发跳转：
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about');
// 带参数跳转：navigate('/about', { state: { id: 1 } });
};
return <button onClick={handleClick}>跳转</button>;
}重定向跳转
使用 Navigate 组件实现条件跳转：
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isLoggedIn }) {
return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
}外部链接跳转
对于非路由的普通链接，使用 <a> 标签：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
外部链接
</a>路由参数传递
动态路由配置：
<Route path="/user/:id" element={<UserProfile />} />获取参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
