React Router 指南

React Router 是一个基于 React 的路由库，用于构建单页面应用程序（SPA）。它允许你为不同的路径定义组件，从而在用户浏览不同页面时动态地改变内容。

安装

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

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

基本用法

React Router 主要由三个组件组成：<Router>, <Route>, 和 <Switch>。

<Router>

<Router> 是所有路由组件的父组件，它负责处理路径变化和渲染对应的组件。

import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 其他路由组件 */}
    </Router>
  );
}

<Route>

<Route> 用于匹配特定的路径，并渲染对应的组件。

import { Route } from 'react-router-dom';

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

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

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

<Switch>

<Switch> 用于包裹多个 <Route> 组件，确保只有一个 <Route> 被渲染。

import { Switch } from 'react-router-dom';

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

高级用法

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

• 动态路由参数：使用冒号（:）来定义动态路由参数。
• 嵌套路由：在子组件中使用 <Route> 或 <Switch> 组件。
• 导航链接：使用 <Link> 或 <NavLink> 组件来创建导航链接。

更多高级用法，请参考官方文档：React Router 官方文档

图片示例

React Router 图标

React Router 的图标，简洁明了地展示了其作为 React 路由库的特点。

希望这份指南能帮助你更好地了解和使用 React Router。如果你还有其他问题，欢迎在评论区留言交流。