Строка запроса React не отображается - PullRequest
Новая
       30

Строка запроса React не отображается

0 голосов
/ 07 апреля 2020

Я использую строку запроса для передачи некоторых параметров и рендеринга нижеуказанного компонента 

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;

Маршрут похож на ниже: 

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

Но это всегда приводит к неопределенному имени и Я вижу только Привет, но не имя. Я использую следующие версии. 

"react-dom": "^16.13.0",
"react-router-dom": "^5.1.2",
"query-string": "^6.11.1"

Не уверен, где я совершаю ошибку. Любая помощь приветствуется.

Ответы [ 2 ]

1 голос
/ 07 апреля 2020

Вы можете запросить параметры запроса пути из location prop. 

props.location.search

Если путь маршрута равен "/show/:name", match prop будет иметь параметр path name, то есть props.match.params.name, и любые параметры запроса URL будут просто добавлены к URL-адресу и могут быть найдены в location prop.

Использование: 

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

Edit vigilant-morning-xezlf

0 голосов
/ 07 апреля 2020

Строка запроса используется с более длинным URL с чем-то после «?». Если я введу localhost:3000/show/bob?, объект props.location будет иметь путь /show/bob, поэтому он вам не нужен для этого указанного c маршрута.

Я воспроизвел ваш код локально и я не получил неопределенного имени, я получил ожидаемый результат. Убедитесь, что маршруты вашего компонента приложения окружены тегом <Router>, например: 

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

Кроме того, условному условию if / else в вашем компоненте show нужно что-то после оператора else. Или используйте && или добавьте null после него.

Если вы заинтересованы в хуках, проверьте ловушку useParams () здесь . Он предоставляет параметры URL для вас.

...