React Router 示例

React Router 是 React 应用程序中用于页面导航和路由管理的库。以下是一些常用的 React Router 示例。

常用组件

• <Route>: 用于定义路由匹配路径和渲染的组件。
• <Switch>: 包含多个 <Route>，用于根据路径匹配渲染第一个匹配的组件。
• <Link>: 用于在应用程序内部导航，类似于 HTML 中的 <a> 标签。

示例

假设我们有一个简单的 React 应用程序，包含以下路由：

• /home：首页
• /about：关于页面

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

const Home = () => <h1>首页</h1>;
const About = () => <h1>关于页面</h1>;

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  </Router>
);

export default App;

图片示例

React Router 示例

更多关于 React Router 的信息，请访问React Router 官方文档。