Reactjs 未显示React查询字符串

我使用查询字符串传递一些参数并呈现下面的组件

import React, { Component } from "react";
class Show extends Component {

  constructor(props,context) {
        super(props,context);
        this.state = {
          name: ''
        };
        console.log(this);

    }


  render() {
    return (
      <div>
        <h4>Hi {this.props.match.params.name} </h4>
        <p></p>
        {this.props.match.params.name ? <b>ID: {this.props.match.params.name}</b> : }
      </div>
    );
  }
}

export default Show;

---

不知道我在哪里出错。非常感谢您的帮助。

您可以从道具中查询路径查询参数

如果路由路径为

“/show/：name”

，则

匹配

道具将具有路径参数

名称

，即

道具.match.params.name

，任何URL查询参数都将简单地附加到URL，并可在

位置

道具上找到

用法：

class Show extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      name: ""
    };
    console.log(this);
  }

  render() {
    return (
      <div>
        <h4>Math Param {this.props.match.params.name} </h4>
        <h3>Query {this.props.location.search} </h3>
        <p />
        {this.props.match.params.name && (
          <b>ID: {this.props.match.params.name}</b>
        )}
      </div>
    );
  }
}

类显示扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
姓名：“
};
console.log（this）；
}
render（）{
返回(
数学参数{this.props.match.params.name}
查询{this.props.location.search}

{this.props.match.params.name&&(
ID:{this.props.match.params.name}
)}
);
}
}

---

查询字符串与较长的URL一起使用，URL后面有“？”字样。如果我键入

localhost:3000/show/bob？

，props.location对象的路径名将为

/show/bob

，因此您不需要它来执行此特定路由

我在本地复制了您的代码，并没有得到“未定义”的名称，而是得到了预期的输出。请确保应用程序组件路由周围有一个

标记，如下所示：

<Router>
     <Route path='/show/:name?' component={Show} />
</Router>

此外，show组件中的if/else条件在else操作符之后需要一些内容。在其后面使用&&或添加

null

---

如果您对钩子感兴趣，请查看useParams（）钩子。它为您提供url参数。

复制/粘贴您的代码；我不能责备你。您可以看到，当我查询james的名字时，页面上没有显示Hi jamesI see这样的名字，您将匹配参数与查询参数混为一谈。感谢您的详细解释：）

props.location.search

class Show extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      name: ""
    };
    console.log(this);
  }

  render() {
    return (
      <div>
        <h4>Math Param {this.props.match.params.name} </h4>
        <h3>Query {this.props.location.search} </h3>
        <p />
        {this.props.match.params.name && (
          <b>ID: {this.props.match.params.name}</b>
        )}
      </div>
    );
  }
}

<Router>
     <Route path='/show/:name?' component={Show} />
</Router>