react如何返回多个页面

在React中，返回多个页面通常涉及路由管理或条件渲染。以下是几种常见的方法：

使用React Router管理多页面

通过React Router的<Routes>和<Route>组件定义多个页面路径，每个路径对应一个组件。例如：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

条件渲染页面

通过状态控制当前显示的页面组件。例如：

import { useState } from 'react';
import Page1 from './Page1';
import Page2 from './Page2';

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

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

动态路由参数

利用路由参数动态加载不同内容。例如：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import UserProfile from './UserProfile';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

嵌套路由

通过嵌套路由实现多层级页面结构。例如：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import Dashboard from './Dashboard';
import Settings from './Settings';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Dashboard />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

使用Outlet组件

在父路由中使用<Outlet>渲染子路由。例如：

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

function Layout() {
  return (
    <div>
      <header>导航栏</header>
      <Outlet />
    </div>
  );
}