如何在React Router中使用match.params？项目路由实现求助

嘿，我来帮你搞定这个React Router的需求！你的需求其实就是动态路由的典型场景，我会一步步给你拆解并写出完整的可运行代码。

首先，你的核心需求是：

• 两个带ID（200、201）的方块，点击跳转到对应/user/:id路由
• 进入路由后显示对应的User XXX文本

下面是完整的App.js代码，我会在代码里加详细注释：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// 定义User组件，用于展示动态路由参数
class User extends Component {
  render() {
    // 从props的match对象里获取动态参数id
    const userId = this.props.match.params.id;
    return (
      <div style={{ padding: '20px', fontSize: '24px' }}>
        User {userId}
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      {/* 所有路由相关组件必须包裹在Router里面 */}
      <Router>
        <div style={{ padding: '20px' }}>
          {/* 两个可点击的方块（用Link实现跳转） */}
          <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
            {/* Link的to属性指定跳转路径，这里用模板字符串拼接ID */}
            <Link to="/user/200">
              <div style={{ width: '100px', height: '100px', backgroundColor: '#42b983', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', cursor: 'pointer' }}>
                ID: 200
              </div>
            </Link>
            <Link to="/user/201">
              <div style={{ width: '100px', height: '100px', backgroundColor: '#35495e', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', cursor: 'pointer' }}>
                ID: 201
              </div>
            </Link>
          </div>

          {/* 配置动态路由：路径里的:id是占位符，匹配/user/xxx的所有路径 */}
          {/* component属性指定当路径匹配时渲染的组件 */}
          <Route path="/user/:id" component={User} />
        </div>
      </Router>
    );
  }
}

export default App;

关键知识点解释： #

1. 动态路由路径：/user/:id里的:id是一个动态占位符，它会匹配/user/后面的任意字符串（这里就是你的200、201），并把这个值存在match.params.id里。
2. Link组件：用来创建路由跳转的链接，替代普通的<a>标签，这样跳转不会刷新整个页面，符合单页应用的特性。
3. 参数获取：在类组件中，路由参数通过this.props.match.params获取；如果是函数组件，可以用react-router-dom提供的useParams钩子。

你只需要把这段代码替换你的App.js，然后启动项目，点击两个方块就能看到对应的路由跳转和文本展示啦！

内容的提问来源于stack exchange，提问作者Jota