当前位置：首页 > React

react如何返回多个页面

2026-03-31 13:04:43React

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

使用React Router实现多页面导航

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

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/page1">Page 1</Link>
        <Link to="/page2">Page 2</Link>
      </nav>
      <Routes>
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
      </Routes>
    </BrowserRouter>
  );
}

条件渲染实现页面切换

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

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

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

使用路由状态保持历史记录

结合useNavigate实现编程式导航，并保留浏览历史：

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

function Page1() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/page2')}>
      Go to Page 2
    </button>
  );
}

嵌套路由组织复杂结构

对于多层级的页面结构，可使用嵌套路由：

react如何返回多个页面

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="dashboard" element={<Dashboard />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>