【 如何使用路由建立多视图单页应用】的详细讲解-2. React（使用React Router）

React Router是React中一个非常流行的路由库。

1. 初始化项目和安装依赖

   npx create-react-app my-spa
   cd my-spa
   npm install react-router-dom
   

2. 设置路由

   在src目录中创建几个组件文件，例如Home.js, About.js, Contact.js，分别代表不同的视图。

   在App.js中设置路由。

   import React from 'react';
   import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
   import Home from './Home';
   import About from './About';
   import Contact from './Contact';
   
   function App() {
     return (
       <Router>
         <nav>
           <ul>
             <li><Link to="/">Home</Link></li>
             <li><Link to="/about">About</Link></li>
             <li><Link to="/contact">Contact</Link></li>
           </ul>
         </nav>
         <Switch>
           <Route exact path="/" component={Home} />
           <Route path="/about" component={About} />
           <Route path="/contact" component={Contact} />
         </Switch>
       </Router>
     );
   }
   
   export default App;
   

   当用户点击不同的链接时，<Router> 会匹配 <Route> 规则来动态加载对应组件。

3. 创建视图组件

   在每个组件文件中定义不同的视图。

4. 运行应用

   npm start