当前位置：首页 > React

react如何切换页面

2026-01-24 16:50:43React

React 切换页面的方法

在 React 中切换页面通常通过路由（Routing）实现，以下是常见的几种方式：

使用 React Router

React Router 是 React 生态中最流行的路由库，支持动态路由和嵌套路由。

安装 React Router：

react如何切换页面

npm install react-router-dom

基本路由配置示例：

import { BrowserRouter as Router, Route, Routes, 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>
  );
}

编程式导航

通过 useNavigate Hook 实现页面跳转：

react如何切换页面

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

function MyComponent() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/about')}>
      Go to About
    </button>
  );
}

动态路由与参数传递

通过 URL 参数传递数据：

<Route path="/user/:id" element={<UserProfile />} />

// 跳转时传递参数
navigate('/user/123');

// 组件内获取参数
const { id } = useParams();

条件渲染实现页面切换

对于简单的 SPA 应用，可通过状态控制组件渲染：

function App() {
  const [page, setPage] = useState('home');

  return (
    <>
      {page === 'home' && <Home />}
      {page === 'about' && <About />}
      <button onClick={() => setPage('about')}>Switch</button>
    </>
  );
}