React Router 入门指南

React Router 是一个基于 React 的路由库，它允许你为单页应用（SPA）添加路由功能。以下是一些关于 React Router 的基本概念和用法。

基本概念

• 路由：路由定义了应用中不同的页面或视图，以及如何导航到这些页面。
• 组件：React 组件是构成应用的基本单元，它们可以渲染到页面上。
• 路径：路径是用户输入的地址，用于导航到不同的页面。

安装

首先，你需要确保你的项目中已经安装了 React 和 React DOM。然后，你可以使用 npm 或 yarn 安装 React Router：

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

基本用法

以下是一个简单的例子，展示了如何使用 React Router 创建一个单页应用：

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

const Home = () => <h1>首页</h1>;
const About = () => <h1>关于我们</h1>;
const Contact = () => <h1>联系方式</h1>;

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  </Router>
);

export default App;

在上面的例子中，我们创建了一个名为 App 的组件，它使用 BrowserRouter 包裹了应用的路由。Switch 组件用于渲染第一个匹配的 Route 组件，而 Route 组件则定义了不同的路径和对应的组件。

高级功能

React Router 提供了许多高级功能，例如：

• 动态路由
• 导航守卫
• 嵌套路由
• Link 组件

更多高级功能可以在官方文档中找到：React Router 官方文档

图片示例

这里有一个关于 React Router 的图片示例：

希望这个入门指南能帮助你更好地理解 React Router。如果你想要了解更多关于 React 的内容，可以访问我们的 React 教程。