React Router 是 React 应用的一个库,它允许你根据不同的路径渲染不同的组件。本教程将带你入门 React Router,并了解如何在你的 React 应用中使用它。

基本概念

React Router 提供了三种主要的路由组件:

  • <Route>:用于匹配特定的路径,并渲染对应的组件。
  • <Switch>:用于包裹 <Route> 组件,只渲染第一个匹配的 <Route>
  • <Redirect>:用于重定向到另一个路径。

安装

首先,确保你已经安装了 React 和 React DOM。然后,你可以使用以下命令安装 React Router:

npm install react-router-dom

使用 <Route>

要使用 <Route> 组件,你需要给它一个 path 属性,这个属性用于匹配当前 URL。如果匹配成功,它会渲染对应的组件。

<Route path="/react-router-tutorial" component={Tutorial} />

在这个例子中,当用户访问 /react-router-tutorial 路径时,Tutorial 组件会被渲染。

使用 <Switch>

如果你有多个路由,可以使用 <Switch> 组件来包裹 <Route> 组件。这样可以确保只渲染第一个匹配的 <Route>

<Switch>
  <Route path="/react-router-tutorial" component={Tutorial} />
  <Route path="/another-path" component={AnotherTutorial} />
</Switch>

重定向

使用 <Redirect> 组件可以实现页面重定向。

<Redirect from="/old-path" to="/new-path" />

在这个例子中,当用户访问 /old-path 时,他们将被重定向到 /new-path

图像示例

React Router 图标

扩展阅读

想要了解更多关于 React Router 的内容,可以访问我们的官方文档:React Router 官方文档.


如果你有任何疑问或者需要进一步的帮助,欢迎在 ABC Compute Forum 上提问。