javascript - 当提供查询参数时，React 查询字符串显示 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>

然后我尝试渲染组件 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 { 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)。指定两个匹配路径相当于定义两个渲染同一组件的独立Route。相同的规则适用于路径特异性，因此首先在数组中定义更复杂的匹配。

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