React组件通信之路由传参(react-router-dom)

React组件之间的通信是一个非常常见的需求，而路由参数传递是其中一种传递参数的方式。本文将详细讲解如何在React应用中通过react-router-dom库实现路由参数传递。

什么是路由参数传递

路由参数传递就是在通过路由跳转到指定页面时，在路由路径上携带一些参数，在跳转后的页面中可以通过某些方式获取这些参数。这种方式通常用于在不同的组件之间传递一些参数。

实现路由参数传递

在React中实现路由参数传递，需要使用到react-router-dom库提供的一些功能。

1. 配置路由

首先需要在Router组件的子组件中配置路由，指定路由路径，并在路径中定义参数。

import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/user/:userId" component={User} />
    </Router>
  );
}

在上述代码中，定义了两个路由，一个是根路由，一个是/user/:userId这个路由，其中userId是一个参数，用于在用户访问/user/1这个路由时，取出1这个参数。

1. 传递参数

在页面进入这个路由时，可以通过props获取这个参数：

function User(props) {
  const userId = props.match.params.userId;
  return (
    <div>
      <h2>User Page</h2>
      <p>User Id: {userId}</p>
    </div>
  );
}

在上面的代码中，通过props.match.params.userId获取了路由参数，这个userId就是路由传递的参数。

1. 跳转页面

在跳转到包含参数的路由时，需要通过Link组件传递参数。

import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <h2>Home Page</h2>
      <Link to="/user/1">Go to User Page</Link>
    </div>
  );
}

在上面的代码中，通过Link组件的to属性传递了参数1，即跳转到/user/1这个路由。

示例

下面提供两个具体的示例，以便更好地理解路由参数传递。

示例1: 传递字符串参数

假设我们要在首页通过Link组件跳转到user页面，并传递一个字符串参数name。

首先需要在App组件中配置路由，并传递参数：

function App() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/user/:name" component={User} />
    </Router>
  );
}

然后在Home组件中使用Link组件传递参数：

function Home() {
  return (
    <div>
      <h2>Home Page</h2>
      <Link to="/user/John">Go to User Page</Link>
    </div>
  );
}

在User组件中通过props获取参数：

function User(props) {
  const name = props.match.params.name;
  return (
    <div>
      <h2>User Page</h2>
      <p>User name: {name}</p>
    </div>
  );
}

示例2: 传递对象参数

假设我们需要在home组件中传递一个对象参数user，包含用户名和年龄，在user组件中展示这个对象的属性。

首先需要定义这个user对象，并传递到Home组件中：

const user = { name: "John", age: 20 };

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

在home组件中使用Link组件传递参数：

function Home(props) {
  const user = props.user;
  return (
    <div>
      <h2>Home Page</h2>
      <Link to={{ pathname: "/user", state: { user } }}>Go to User Page</Link>
    </div>
  );
}

在Link组件的to属性中，我们使用了一个含有两个属性的对象，其中pathname表示路径，state表示需要传递的对象。

在User组件中通过location获取传递的参数：

function User(props) {
  const location = props.location;
  const user = location.state.user;
  return (
    <div>
      <h2>User Page</h2>
      <p>User name: {user.name}</p>
      <p>User age: {user.age}</p>
    </div>
  );
}

在上述代码中，通过props获取到location属性，然后从location.state中取出传递的对象。

总结

通过上述的讲解和示例，相信大家已经掌握了如何在React组件间通过路由传递参数，这是非常常见的应用场景，在实际的开发中需要经常用到。