提供查询参数时显示 404 的反应查询字符串

Question

我是 React 新手，并尝试根据名称查询呈现页面，例如 http://localhost:3000/show?name=james

所以我最初将路线添加为：

<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;

然后当我尝试显示页面时

http://localhost:3000/show?name=james

它总是显示 404。不确定我做错了哪一部分。任何帮助表示赞赏。 我也在使用 react-router-dom 5.1.2 。 谢谢。

Answer 1

path="show(/:name)"

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

重新定义["/show/:id", "/show"]的路径

<Route path={["/show/:id", "/show"]} name="name" component={Show} />

由于Route是直接渲染组件，它可以直接从props（this.props.match.params&this.props.location.search）拉取查询参数和匹配参数。指定两个匹配路径等效于定义两个单独的Routes，它们呈现相同的组件。相同的规则适用于路径特异性，因此首先在数组中定义更复杂的匹配项。

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>
  }
}

Answer 2

编辑：不敢相信我最初没有注意到这一点......

您需要将您的path="*" 路由放在Switch 的底部，否则它将匹配所有内容，并且它下面的任何内容甚至都没有机会匹配，因为Switches 只匹配一个路由。当然，确保正确设置路由路径的描述（如下）也适用。

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

https://codesandbox.io/s/elated-browser-d0sew?file=/src/App.js

---

路由与查询参数不匹配。

"请注意：path-to-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;

选项 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 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;

工作示例：https://codesandbox.io/s/silent-rain-n61zs