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多页面应用了。每个页面都由一个独立的组件表示，并且可以通过导航链接在不同页面之间进行切换。