react多頁面應用怎么搭建

要搭建一個React多頁面應用，你可以按照以下步驟進行操作：

1. 創建一個新的React項目： 使用命令行工具進入項目文件夾，然后運行以下命令來創建一個新的React項目：

   npx create-react-app my-app
   

   這將會在當前目錄下創建一個名為my-app的新項目。

2. 創建多個頁面組件： 在src目錄下創建多個頁面組件，每個組件表示一個頁面。例如，你可以創建Home.js、About.js等文件來分別表示首頁和關于頁面。

3. 創建路由器： 安裝React Router庫，使用以下命令：

   npm install react-router-dom
   

   在src目錄下創建一個名為AppRouter.js的文件，并在其中添加路由配置代碼，以定義頁面路由。

   在App.js中導入并使用AppRouter組件。

4. 更新頁面組件： 在每個頁面組件中，使用React Router提供的路由組件來定義路由路徑和組件的映射關系。例如，你可以在Home.js文件中添加以下代碼：

   import { Route } from 'react-router-dom';
   import Home from './Home';
   
   const AppRouter = () => {
     return (
       <div>
         <Route path="/" component={Home} exact={true} />
         <Route path="/about" component={About} />
       </div>
     );
   }
   

5. 添加導航： 在每個頁面組件中添加導航鏈接，以便用戶可以在不同頁面之間進行導航。例如，你可以在Home.js文件中添加以下代碼：

   import { Link } from 'react-router-dom';
   
   const Home = () => {
     return (
       <div>
         <h1>Home</h1>
         <nav>
           <ul>
             <li><Link to="/">Home</Link></li>
             <li><Link to="/about">About</Link></li>
           </ul>
         </nav>
       </div>
     );
   }
   

6. 運行應用： 使用以下命令啟動React開發服務器，以查看應用的效果：

   npm start
   

這樣，你就可以搭建一個基本的React多頁面應用了。每個頁面都由一個獨立的組件表示，并且可以通過導航鏈接在不同頁面之間進行切換。