react如何跳转html页面
使用 React Router 进行页面跳转
React 应用通常使用 React Router 管理页面导航，实现单页应用（SPA）的跳转效果。以下是常见方法：
安装 React Router
npm install react-router-dom配置路由
在根组件（如 App.js）中设置路由：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import HomePage from './HomePage';
import HtmlPage from './HtmlPage';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/html-page" element={<HtmlPage />} />
</Routes>
</Router>
);
}使用 Link 组件跳转
在组件内部使用 Link 实现声明式导航：
import { Link } from 'react-router-dom';
function HomePage() {
return (
<div>
<Link to="/html-page">跳转到HTML页面</Link>
</div>
);
}编程式导航
通过 useNavigate Hook 实现代码跳转：
import { useNavigate } from 'react-router-dom';
function HomePage() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/html-page')}>
跳转到HTML页面
</button>
);
}直接渲染 HTML 内容
若需在 React 组件中嵌入 HTML 字符串，使用 dangerouslySetInnerHTML：
function HtmlPage() {
const htmlContent = '<h1>HTML内容</h1><p>这段内容会被渲染为HTML</p>';
return (
<div dangerouslySetInnerHTML={{ __html: htmlContent }} />
);
}跳转外部 HTML 页面
若需跳转到项目外的独立 HTML 文件：
使用 window.location
function RedirectButton() {
const handleRedirect = () => {
window.location.href = '/external-page.html';
};
return <button onClick={handleRedirect}>跳转外部页面</button>;
}使用锚点标签
<a href="/external-page.html">跳转外部HTML页面</a>注意事项
- 使用 React Router 时确保所有路由组件包裹在
<Router>内 - 直接跳转外部页面会导致 React 应用卸载，仅适用于完全独立的静态页面
dangerouslySetInnerHTML需谨慎使用以避免 XSS 攻击
