zh/react/router/docs

React Router 是一个用于 React 应用的声明式路由库，它使得构建单页面应用（SPA）变得非常简单。以下是一些关于 React Router 的基本概念和用法。

基本概念

React Router 主要由三个核心组件构成：

• Router：路由器组件，负责整个应用的路由配置。
• Route：路由组件，用于定义路径和组件的映射关系。
• Switch：包裹 Route 组件，只渲染第一个匹配的子组件。

安装

首先，确保你已经安装了 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';

function App() {
  return (
    <Router>
      <div>
        <h1>React Router 示例</h1>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/" component={Home} />
          <Route component={NoMatch} />
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>首页</h2>;
}

function About() {
  return <h2>关于我们</h2>;
}

function Contact() {
  return <h2>联系方式</h2>;
}

function NoMatch() {
  return <h2>404 页面未找到</h2>;
}

export default App;

图片

React Router 示例

更多关于 React Router 的内容，请访问我们的官方文档。

React Router 是一个强大的工具，可以帮助你构建高性能的 React 应用。希望这篇文章能帮助你入门。如果你有更多问题，欢迎在[论坛](/zh/react/router/forum)提问。