Javascript 当提供查询参数时，React查询字符串显示404

我不太会做出反应，并尝试根据名称查询呈现页面，如

因此，我最初将路线添加为：

<BrowserRouter>
<Switch>    
<Route path='*' component={ErrorComponent} />} />
<Route path="show(/:name)" name="name" component={Show}></Route>
</Switch>
</BrowserRouter>

} />

然后我尝试渲染组件，如下所示：

import React, { Component } from 'react';
import queryString from 'query-string';
class Show extends Component {
  componentDidMount(){
    console.log(this.props.location.search);
    const values = queryString.parse(this.props.location.search);
    console.log(values.name);
  }


  render() {
    const { params } = this.props.match;
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {params.id ? <b>ID: {params.id}</b> : <i>ID is optional.</i>}
    </div>
  }
}

export default Show;

import React，{Component}来自'React'；
从“查询字符串”导入查询字符串；
类显示扩展组件{
componentDidMount（）{
console.log（this.props.location.search）；
const values=queryString.parse（this.props.location.search）；
console.log（values.name）；
}
render（）{
const{params}=this.props.match；
返回
关于
这是关于佩奇的

{params.id？id:{params.id}:id是可选的。}
}
}
导出默认显示；

然后当我尝试显示页面时

它总是显示404。不知道我做错了哪一部分。感谢您的帮助。 此外，我正在使用react路由器dom 5.1.2。

---

谢谢。

编辑：真不敢相信我原来没有注意到这一点

您需要将您的

path=“*”

路由放在

交换机的底部，否则它将匹配所有内容，而它下面的任何内容都将没有机会匹配，因为
交换机只匹配一条路由。当然，下面关于确保正确设置路线路径的描述也适用

      <Switch>
        <Route path="/show/:name?" component={ShowRouteParam} />
        <Route path="*">ERROR 404</Route>
      </Switch>


错误404



路由与查询参数不匹配

“请注意：通过RegExp路径返回的RegExp用于
与路径名或主机名一起使用。它无法处理查询字符串
或URL的片段。”

根据您想要的方式，您可以将id设置为路由的可选部分，也可以将其设置为普通查询参数

备选案文1：

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



组成部分：

import React, { Component } from 'react';
import queryString from 'query-string';
class Show extends Component {
  componentDidMount(){
    console.log(this.props.location.search);
    const values = queryString.parse(this.props.location.search);
    console.log(values.name);
  }


  render() {
    const { params } = this.props.match;
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {params.name ? <b>ID: {params.name}</b> : <i>Name is optional.</i>}
    </div>
  }
}

export default Show;

import React, { Component } from 'react';
import queryString from 'query-string';
class Show extends Component {
  componentDidMount(){
    console.log(this.props.location.search);
    const values = queryString.parse(this.props.location.search);
    console.log(values.name);
  }


  render() {
    const values = queryString.parse(this.props.location.search);
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {values.name ? <b>ID: {values.name}</b> : <i>Name is optional.</i>}
    </div>
  }
}

export default Show;

import React，{Component}来自'React'；
从“查询字符串”导入查询字符串；
类显示扩展组件{
componentDidMount（）{
console.log（this.props.location.search）；
const values=queryString.parse（this.props.location.search）；
console.log（values.name）；
}
render（）{
const{params}=this.props.match；
返回
关于
这是关于佩奇的

{params.name？ID:{params.name}：name是可选的。}
}
}
导出默认显示；

备选案文2：

<Route path="/show" component={Show}></Route>



组成部分：

import React, { Component } from 'react';
import queryString from 'query-string';
class Show extends Component {
  componentDidMount(){
    console.log(this.props.location.search);
    const values = queryString.parse(this.props.location.search);
    console.log(values.name);
  }


  render() {
    const { params } = this.props.match;
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {params.name ? <b>ID: {params.name}</b> : <i>Name is optional.</i>}
    </div>
  }
}

export default Show;

import React, { Component } from 'react';
import queryString from 'query-string';
class Show extends Component {
  componentDidMount(){
    console.log(this.props.location.search);
    const values = queryString.parse(this.props.location.search);
    console.log(values.name);
  }


  render() {
    const values = queryString.parse(this.props.location.search);
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {values.name ? <b>ID: {values.name}</b> : <i>Name is optional.</i>}
    </div>
  }
}

export default Show;

import React，{Component}来自'React'；
从“查询字符串”导入查询字符串；
类显示扩展组件{
componentDidMount（）{
console.log（this.props.location.search）；
const values=queryString.parse（this.props.location.search）；
console.log（values.name）；
}
render（）{
const values=queryString.parse（this.props.location.search）；
返回
关于
这是关于佩奇的

{values.name？ID:{values.name}：name是可选的。}
}
}
导出默认显示；

工作示例：
编辑：不敢相信我原来没有注意到这一点

您需要将您的
path=“*”
路由放在
交换机的底部，否则它将匹配所有内容，而它下面的任何内容都将没有机会匹配，因为
交换机只匹配一条路由。当然，下面关于确保正确设置路线路径的描述也适用

      <Switch>
        <Route path="/show/:name?" component={ShowRouteParam} />
        <Route path="*">ERROR 404</Route>
      </Switch>


错误404



路由与查询参数不匹配

“请注意：通过RegExp路径返回的RegExp用于
与路径名或主机名一起使用。它无法处理查询字符串
或URL的片段。”

根据您想要的方式，您可以将id设置为路由的可选部分，也可以将其设置为普通查询参数

备选案文1：

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



组成部分：

import React, { Component } from 'react';
import queryString from 'query-string';
class Show extends Component {
  componentDidMount(){
    console.log(this.props.location.search);
    const values = queryString.parse(this.props.location.search);
    console.log(values.name);
  }


  render() {
    const { params } = this.props.match;
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {params.name ? <b>ID: {params.name}</b> : <i>Name is optional.</i>}
    </div>
  }
}

export default Show;

import React, { Component } from 'react';
import queryString from 'query-string';
class Show extends Component {
  componentDidMount(){
    console.log(this.props.location.search);
    const values = queryString.parse(this.props.location.search);
    console.log(values.name);
  }


  render() {
    const values = queryString.parse(this.props.location.search);
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {values.name ? <b>ID: {values.name}</b> : <i>Name is optional.</i>}
    </div>
  }
}

export default Show;

import React，{Component}来自'React'；
从“查询字符串”导入查询字符串；
类显示扩展组件{
componentDidMount（）{
console.log（this.props.location.search）；
const values=queryString.parse（this.props.location.search）；
console.log（values.name）；
}
render（）{
const{params}=this.props.match；
返回
关于
这是关于佩奇的

{params.name？ID:{params.name}：name是可选的。}
}
}
导出默认显示；

备选案文2：

<Route path="/show" component={Show}></Route>



组成部分：

import React, { Component } from 'react';
import queryString from 'query-string';
class Show extends Component {
  componentDidMount(){
    console.log(this.props.location.search);
    const values = queryString.parse(this.props.location.search);
    console.log(values.name);
  }


  render() {
    const { params } = this.props.match;
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {params.name ? <b>ID: {params.name}</b> : <i>Name is optional.</i>}
    </div>
  }
}

export default Show;

import React, { Component } from 'react';
import queryString from 'query-string';
class Show extends Component {
  componentDidMount(){
    console.log(this.props.location.search);
    const values = queryString.parse(this.props.location.search);
    console.log(values.name);
  }


  render() {
    const values = queryString.parse(this.props.location.search);
    return <div>
      <h4>About</h4>
      <p>This is About page.</p>
      {values.name ? <b>ID: {values.name}</b> : <i>Name is optional.</i>}
    </div>
  }
}

export default Show;

import React，{Component}来自'React'；
从“查询字符串”导入查询字符串；
类显示扩展组件{
componentDidMount（）{
console.log（this.props.location.search）；
const values=queryString.parse（this.props.location.search）；
console.log（values.name）；
}
render（）{
const values=queryString.parse（this.props.location.search）；
返回
关于
这是关于佩奇的

{values.name？ID:{values.name}：name是可选的。}
}
}
导出默认显示；

工作示例：

path=“show（/：name）”

这不是要匹配的有效URL路径

重新定义
[“/show/：id”，“/show”]


path=“show（/：name）”

这不是要匹配的有效URL路径

重新定义
[“/show/：id”，“/show”]

嗨，扎卡里，谢谢你的解释，但在尝试了两种解决方案后，它还是抱怨404。这和路线有关吗？好的，我修正了这个错误。我们错过了最初的路线。我还包括了一个关于codesandbox的工作示例。希望这有帮助：）我可以理解逻辑，但当我在我的应用程序中尝试这一点，并调用浏览器时，它应该能够正确呈现页面。但它仍然是404。我还使用浏览器路由器是case@UsmanJ，我更新了我的答案，因为我意识到我有点搞错了。如果更新没有解决您的问题，我真的需要查看一个可复制的示例以提供帮助。@UsmanJ您需要将查询字符串分隔为