正文

掌握React Router参数传递，轻松实现页面跳转与数据同步

/0 浏览量
1026

在React开发中，页面跳转和数据同步是常见的功能需求。React Router作为React的路由管理库，为我们提供了强大的路由功能。今天，我们就来一起探讨如何使用React Router进行参数传递，从而实现页面跳转与数据同步。

参数传递的基本概念

在React Router中，我们可以通过URL传递参数，这些参数可以用于控制页面渲染或获取用户输入。参数传递通常分为两种形式：路径参数和查询参数。

路径参数

路径参数是通过路径本身传递的参数，例如 /user/:id 中的 :id。当访问这个路径时，id 就是一个路径参数。

查询参数

查询参数是通过URL中的查询字符串传递的参数，例如 ?name=John 中的 name。查询参数可以包含多个键值对。

实现路径参数传递

首先，我们需要安装React Router：

npm install react-router-dom

然后，在组件中使用 Link 组件实现路径参数的传递：

import React from 'react';
import { Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <h1>用户信息</h1>
      <Link to="/user/123">查看用户123</Link>
    </div>
  );
}

export default App;

在上面的代码中，我们通过 Link 组件的 to 属性传递了一个路径参数 123。

接下来，我们创建一个接收路径参数的组件：

import React from 'react';
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return (
    <div>
      <h1>用户 {id}</h1>
    </div>
  );
}

export default User;

在上面的代码中，我们通过 useParams 钩子获取到路径参数 id，并将其渲染在页面中。

实现查询参数传递

同样地，我们可以通过 Link 组件的 to 属性传递查询参数：

import React from 'react';
import { Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <h1>搜索结果</h1>
      <Link to="/search?keyword=React">搜索React</Link>
    </div>
  );
}

export default App;

在上面的代码中，我们通过 Link 组件的 to 属性传递了一个查询参数 keyword=React。

接下来，我们创建一个接收查询参数的组件：

import React from 'react';
import { useSearchParams } from 'react-router-dom';

function Search() {
  const [searchParams] = useSearchParams();
  const keyword = searchParams.get('keyword');
  return (
    <div>
      <h1>搜索结果：{keyword}</h1>
    </div>
  );
}

export default Search;

在上面的代码中，我们通过 useSearchParams 钩子获取到查询参数 keyword，并将其渲染在页面中。

总结

通过以上内容，我们了解了如何在React Router中实现参数传递，从而实现页面跳转与数据同步。路径参数和查询参数都是常用的传递方式，可以根据实际需求灵活运用。希望这篇文章能帮助你在React开发中更加得心应手。

-- 展开阅读全文 --