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 攻击