React-router 使用指南-JavaScript中文网-JavaScript教程资源分享门户

React-router 是 React 应用程序中使用的主要路由库。它可以帮助我们在单页应用中管理不同的 URL，并将不同的组件渲染到页面上。本文将详细介绍 React-router 的使用方法，包括基本概念、路由配置、路由传参、路由嵌套等。

基本概念

React-router 主要有以下几个概念：

Router：路由器，负责管理应用程序的路由。
Route：路由规则，定义 URL 对应的组件。
Link：链接，用于在不同的 URL 之间切换。
Switch：路由切换器，用于包裹 Route 组件，根据 URL 匹配渲染对应的组件。

路由配置

React-router 的路由配置分为两种方式：声明式路由和编程式路由。

声明式路由

声明式路由是通过 JSX 语法来定义的。例如：

-- -------------------- ---- -------
------ - -------------- ----- - ---- -------------------

-------- ----- -
  ------ -
    ---------------
      ------ -------- ----- ---------------- --
      ------ ------------- ----------------- --
      ------ ------------- ----------------- --
    ----------------
  --
-

上面的代码中，BrowserRouter 是路由器组件，Route 是路由规则组件。path 属性定义了 URL，component 属性定义了对应的组件。

编程式路由

编程式路由是通过 JavaScript 代码来定义的。例如：

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

function handleClick() {
  const history = useHistory();
  history.push('/about');
}

上面的代码中，useHistory 是 React-router 提供的 hook，可以获取路由器的 history 对象。通过调用 history.push 方法，可以将 URL 跳转到指定的页面。

路由传参

React-router 支持在 URL 中传递参数，可以通过三种方式来获取参数：params、query 和 state。

params

params 是将参数作为 URL 的一部分传递的方式。例如：

-- -------------------- ---- -------
------ - -------------- ----- - ---- -------------------

-------- ----- -
  ------ -
    ---------------
      ------ ----------------- ---------------- --
    ----------------
  --
-

-------- ----------- -
  ----- - -- - - -------------------
  ------ --------- --- -----------
-

上面的代码中，:id 表示参数，可以通过 props.match.params.id 来获取参数的值。

query

query 是将参数作为 URL 的查询字符串传递的方式。例如：

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

function handleClick() {
  const history = useHistory();
  history.push('/about?name=John');
}

上面的代码中，?name=John 表示参数，可以通过 props.location.search 来获取参数的值。

state

state 是将参数作为 URL 的状态传递的方式。例如：

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

function handleClick() {
  const history = useHistory();
  history.push('/about', { name: 'John' });
}

上面的代码中，{ name: 'John' } 表示参数，可以通过 props.location.state 来获取参数的值。

路由嵌套

React-router 支持将路由规则进行嵌套。例如：

-- -------------------- ---- -------
------ - -------------- ----- - ---- -------------------

-------- ----- -
  ------ -
    ---------------
      ------ -------- ----- ---------------- --
      ------ ------------- ----------------- --
      ------ --------------
        ------ -------- ----- -------------------- --
        ------ ----------- ---------------------- --
      --------
    ----------------
  --
-

上面的代码中，/users 下面包含了两个子路由：/ 和 /:id。/ 表示用户列表页面，/:id 表示用户详情页面。

总结

React-router 是 React 应用程序中使用的主要路由库，它可以帮助我们在单页应用中管理不同的 URL，并将不同的组件渲染到页面上。本文介绍了 React-router 的基本概念、路由配置、路由传参和路由嵌套等内容，希望能够对大家的学习和开发有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65ff0e6ed10417a222a3c30f