当前位置：首页 > React

react如何返回多个页面

2026-01-24 05:35:03React

在React中，返回多个页面通常涉及路由管理和状态控制。以下是几种常见的方法：

使用React Router管理多页面

通过React Router的BrowserRouter和Route组件定义多个页面，利用Link或useNavigate实现页面跳转。例如：

react如何返回多个页面

import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
      </Routes>
      <Link to="/page1">跳转至页面1</Link>
      <Link to="/page2">跳转至页面2</Link>
    </BrowserRouter>
  );
}

动态渲染组件实现伪页面切换

通过状态控制当前显示的组件，模拟多页面效果：

react如何返回多个页面

function App() {
  const [currentPage, setCurrentPage] = useState('page1');

  return (
    <>
      {currentPage === 'page1' && <Page1 />}
      {currentPage === 'page2' && <Page2 />}
      <button onClick={() => setCurrentPage('page1')}>页面1</button>
      <button onClick={() => setCurrentPage('page2')}>页面2</button>
    </>
  );
}

使用条件渲染与路由结合

在路由组件内部根据参数或状态进一步细分内容：

function UserPage() {
  const { tab } = useParams();
  return (
    <>
      {tab === 'profile' && <Profile />}
      {tab === 'settings' && <Settings />}
    </>
  );
}

嵌套路由实现分层页面

通过嵌套路由组织复杂的页面结构：

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="analytics" element={<Analytics />} />
    <Route path="reports" element={<Reports />} />
  </Route>
</Routes>