如何使用原生react创建个项目，支持多路由

使用原生 React 创建一个支持多路由的项目，你需要引入 React Router 库。React Router 是用于 React 应用中最常用的路由管理库之一。下面是一个简单的步骤指南来创建一个支持多路由的 React 项目。

第一步：创建一个新的 React 项目

首先，确保你的电脑上安装了 Node.js。然后，使用create-react-app脚手架快速搭建一个新项目：

npx create-react-app my-multi-route-app
cd my-multi-route-app

第二步：安装 React Router

在你的项目中安装 React Router。目前最新版本为react-router-dom，你可以通过 npm 或 yarn 进行安装：

npm install react-router-dom
# 或者
yarn add react-router-dom

第三步：设置路由

打开src目录下的App.js文件，用 React Router 配置多路由。这里以三个简单的页面为例：主页、关于页和联系页。

1. 首先，在App.js顶部导入必要的组件：

   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   

2. 然后，定义一些简单的页面组件。这些可以是独立的组件文件，也可以直接在App.js内定义。这里我们直接在同一个文件里定义：

   const Home = () => <h2>主页</h2>;
   const About = () => <h2>关于我们</h2>;
   const Contact = () => <h2>联系我们</h2>;
   

3. 使用Router包裹你的应用，并使用Switch和Route来定义不同的路径对应的组件：

   function App() {
     return (
       <Router>
         <div>
           <nav>
             <ul>
               <li>
                 <Link to='/'>首页</Link>
               </li>
               <li>
                 <Link to='/about'>关于</Link>
               </li>
               <li>
                 <Link to='/contact'>联系我们</Link>
               </li>
             </ul>
           </nav>
   
           {/* A <Switch> looks through its children <Route>s and
               renders the first one that matches the current URL. */}
           <Switch>
             <Route path='/about'>
               <About />
             </Route>
             <Route path='/contact'>
               <Contact />
             </Route>
             <Route path='/'>
               <Home />
             </Route>
           </Switch>
         </div>
       </Router>
     );
   }
   

第四步：运行项目

保存更改后，可以通过以下命令启动开发服务器：

npm start
# 或者
yarn start

现在，你应该能看到一个基本的多路由 React 应用，它可以根据不同的 URL 显示不同的页面内容。

以上就是使用原生 React 创建支持多路由项目的简单步骤。根据实际需求，你可能需要进一步定制化这些路由规则，比如添加嵌套路由、动态路由等。