0603基础使用-react路由-react

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 
// 定义一个组件来展示路由的内容
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Users = () => <h2>Users</h2>;
 
// 使用Router定义路由
const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about/">About</Link>
          </li>
          <li>
            <Link to="/users/">Users</Link>
          </li>
        </ul>
      </nav>
 
      {/* 路由匹配 */}
      <Route path="/" exact component={Home} />
      <Route path="/about/" component={About} />
      <Route path="/users/" component={Users} />
    </div>
  </Router>
);
 
export default App;

这个代码实例展示了如何在React应用中使用react-router-dom来定义和使用路由。它定义了三个组件（Home, About, Users），并通过Link组件提供导航链接。Route组件根据URL的变化来渲染对应的组件。这是一个基本的React路由使用示例，适合初学者学习和理解。