Проблема для динамического рендеринга компонента с помощью React Router - PullRequest
Новая
       20

Проблема для динамического рендеринга компонента с помощью React Router

0 голосов
/ 14 мая 2019

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

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

В этом компоненте я хочу динамически визуализировать компонент «Статьи», используя идентификатор 

class JobCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],   
    };
  }

  componentWillMount() {
    fetch(url)
      .then(data => data.json())
      .then(result =>
        this.setState({
          data: result        
        })
      );
  }


  render() {

     const { match } = this.props;
      const { data, value } = this.state;

      return (
        <>
             <div>
                {results.map((job, id) => (
                  <div key={id}>
                    <div key={job._id} className="blog-card">
                      <div className="meta">
                        <div className="photo">
                          <img src={job.img} alt="logo" />
                        </div>    
                      </div>
                      <div className="description">
                        <h5>{job.position_name}</h5>
                        <p className="read-more">
                          <p>{job.location}</p>
                          <p>
                            <span className="learn-pow">
                              {" "}
                              <Link
                                to={{
                                  pathname: `${match.url}/${job._id}`,
                                  state: job
                                }}
                              >
                                {job.workplace_name}
                              </Link>{" "}
                             Enter Location
                            </span>
                          </p>
                        </p>
                      </div>
                    </div>

                  </div>
                ))}
              </div>
            }

            <Route path={`${match.path}/:id`} component={Articles} />
        </>
      );

  }
}

export default JobCard;

А вот компонент, который я хочу визуализировать: 


import React from 'react';

const Articles = ({ location }) => (
  <div>
    <h1>{location.state.name}</h1>
    <h2>{location.state.email}</h2>
    <h2>{location.state.place}</h2>
  </div>
)

export default Articles;

Когда я нажимаю на карточку, URL-адрес правильный, поэтому я получаю идентификатор, но у меня нет доступа к компоненту Article.Я пытался утешить журнал, но ничего не появляется.

1 Ответ

0 голосов
/ 14 мая 2019

Вместо этого 

<Route path={`${match.path}/:id`} component={Articles} />

попробуйте сделать это 

<Route path={`${match.url}/:id`} component={Articles} />
...