React.js中无法传递URL参数的问题及解决方法咨询

嘿，我来帮你搞定这个问题！你的代码里有两个核心问题导致拿不到URL参数，咱们一步步修复，同时我也会给你介绍其他实现方式。

首先，你的代码里的两个关键错误 #

1. 路由顺序搞反了：Switch组件是按从上到下的顺序匹配路由的，你先定义了不带参数的/thirdview路由，再定义带:number参数的版本。这样当你访问/thirdview/7时，第一个不带参数的路由已经匹配成功，Switch就会停止匹配，带参数的路由永远不会被触发，自然拿不到params。
2. 参数获取路径错了：在类组件中，路由参数是挂载在this.props.match.params下的，不是直接在this.props.params里，而且你JSX里的模板字符串写法也不对（用了#{}，React里应该直接用{}）。

修复步骤 #

1. 调整路由顺序

把带参数的路由放在不带参数的前面，确保带参数的请求能匹配到正确的路由：

import React from "react";
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
import Helloworld from './components/helloworld/helloworld.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from "./components/thirdview/thirdview.component";

const AppRoutes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={Helloworld}/>
      <Route path='/secondview' component={SecondView}/>
      {/* 带参数的路由要放在前面，优先匹配 */}
      <Route path='/thirdview/:number' component={ThirdView}/>
      <Route path='/thirdview' component={ThirdView}/>
      <Redirect from='*' to='/' />
    </Switch>
  </BrowserRouter>
);

export default AppRoutes;

2. 修正ThirdView的参数获取逻辑

把参数获取路径改成this.props.match.params.number，同时修正JSX里的写法：

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

class ThirdView extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    // 这里也可以打印参数，确认是否拿到
    console.log('当前参数:', this.props.match.params.number);
  }

  render() {
    console.log('所有路由参数:', this.props.match.params);
    // 解构参数，写法更简洁
    const { number } = this.props.match.params;
    return (
      <div className={"boxDiv"}>
        <p>Third View</p>
        <h1>parameter passed: ({number})</h1>
      </div>
    );
  }
}

export default withRouter(ThirdView);

其他实现方式 #

方式1：函数组件 + useParams钩子（React Router v6+推荐）

如果你的项目可以升级到React Router v6，或者你愿意把组件改成函数组件，用useParams钩子会更简洁，不需要withRouter：

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

const ThirdView = () => {
  // 直接解构出number参数
  const { number } = useParams();

  useEffect(() => {
    console.log('参数:', number);
  }, [number]);

  return (
    <div className={"boxDiv"}>
      <p>Third View</p>
      <h1>parameter passed: ({number})</h1>
    </div>
  );
};

export default ThirdView;

对应的v6路由配置也要调整，用Routes替代Switch，element替代component：

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

const AppRoutes = () => (
  <BrowserRouter>
    <Routes>
      <Route path='/' element={<Helloworld />} />
      <Route path='/secondview' element={<SecondView />} />
      <Route path='/thirdview/:number' element={<ThirdView />} />
      <Route path='/thirdview' element={<ThirdView />} />
      {/* v6里用Navigate替代Redirect */}
      <Route path='*' element={<Navigate to='/' />} />
    </Routes>
  </BrowserRouter>
);

方式2：用render属性直接传参（类组件可选）

如果你不想用withRouter，可以在路由配置里用render属性直接把参数传递给组件：

// 路由配置中修改ThirdView的路由
<Route path='/thirdview/:number' render={(routeProps) => (
  <ThirdView number={routeProps.match.params.number} />
)} />

// ThirdView组件直接读取props里的number，不需要withRouter
class ThirdView extends React.Component {
  render() {
    const { number } = this.props;
    return (
      <div className={"boxDiv"}>
        <p>Third View</p>
        <h1>parameter passed: ({number})</h1>
      </div>
    );
  }
}

export default ThirdView;

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