Не могу получить идентификатор от URL - PullRequest
Новая
       28

Не могу получить идентификатор от URL

0 голосов
/ 28 октября 2019

Как вы можете видеть на этой картинке, я пытаюсь идентифицировать с адреса / адреса. Затем пользователь, щелкнув пользователь будет перенаправлен на страницу вопроса. Оттуда я не могу получить идентификатор.

enter image description here

В моем файле App.js есть этот компонент, который загружает все вопросы, мне нужно иметьхранилище идентификаторов на следующей странице, так что я могу искать в своем массиве по идентификатору.

Вот страница questions.js, которая должна отобразить вопросы. Мне нужен идентификатор из URL 

import React, { Component } from "react";
import QuestionItem from "./QuestionItem";
import Question from "./Question";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

export class Questions extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return this.props.dataFromParent
      .filter(e => e.id === 1) //Parse id from URL here, but HOW????
      .map((column, index) => (
        <div className="container mt-5" key={index}>
          {column.name}
          <br></br>
        </div>
      ));
  }
}

export default Questions;

Вот мой маршрут из app.jss, я попытался проанализировать идентификатор как реквизит от маршрута к компоненту. Но это не сработает. 

<Questions
  exact
  path="/question/:id"
  dataFromParent={this.state.questions}
  idFromUrl={this.props.id}
  component={Questions}
></Question>

Я новичок в React, поэтому я не знаю, что я могу сделать, чтобы заставить его работать.

Ответы [ 3 ]

0 голосов
/ 28 октября 2019

Вы должны использовать withRouter для добавления параметров маршрутизатора к вашему Questions компоненту, например так: 

import React, { Component } from 'react';
import { withRouter }       from 'react-router-dom';

export class Questions extends Component {
    constructor(props) {
        super(props);

        this.state = {};
    }

    render() {
        const { match: { params } } = this.props;
        console.log(params); // here is your params object with id

        return this.props.dataFromParent
            .filter(e => e.id === 1) //Parse id from URL here, but HOW????
            .map((column, index) => (
                <div
                    className="container mt-5"
                    key={ index }
                >
                    { column.name }
                    <br></br>
                </div>
            ));
    }
}

export default withRouter(Questions);
0 голосов
/ 28 октября 2019

Я нашел решение по моей проблеме. Я не мог другие мыслить на работу. Но это работает сейчас!

enter image description here

0 голосов
/ 28 октября 2019

Вы можете проанализировать вашу информацию, выполнив что-то вроде этого: 

<Questions
  exact
  path={"/question:" + this.props.id }
  dataFromParent={this.state.questions}
  idFromUrl={this.props.id}
  component={Questions}
></Question>

И получить с вашим объектом, используя props.match.params от реакции-маршрутизатора (обязательно импортируйте с помощью роутера). Чтобы использовать withRouter, сначала импортируйте его из response-router-dom 

import { withRouter } from "react-router-dom";

Это компонент высокого порядка, другими словами, он оборачивает ваш компонент, так что вы можете применить его во время экспорта, например так: 

export default withRouter(Questions);

После этого маршрутизатор отправит вам объект (я предлагаю вам сделать console.log (this.props), чтобы увидеть всю информацию, которую предоставляет withRouter с вашего пути)

Вот ссылка, счастливого кодирования!

https://reacttraining.com/react-router/core/api/withRouter

...