Маршрутизация с помощью match () не работает в приложении React

Question

У меня есть главная страница со списком вакансий.

Когда пользователь нажимает на конкретный список вакансий, новый маршрут сайта, например, "homepage.com/jobs/12345" должен открыть описание выбранной работы.

Вся информация для заданий хранится в массиве.Каждое задание хранится в объекте.

Мой вопрос: Как я могу показать описание выбранного задания (ключ описания из выбранного элемента задания) на новом маршруте, как в приведенном выше примере URL-адреса?

Элемент в массиве выглядит следующим образом:

  {
    "id": "12345",
    "position": "Marketing Manager",
    "company": "Apple",
    "description": "Lorem ipsum",
    "date": "2018-11-27T23:11:27Z"
  },

Маршрутизация в App.js выглядит следующим образом:

<Router>
        <React.Fragment>
          <Route
            exact
            path="/"
            render={() => (
              <Home jobs={filteredJobs} searchChange={this.onSearchChange} />
            )}
          />
          <Route
            path="/jobs/:id"
            render={({ match }) => (
              <div>
                <Description
                  description={
                    this.state.jobs.find(job => job.id === match.params.id)
                      .description
                  }
                />
              </div>
            )}
          />
        </React.Fragment>
      </Router>

Home.js выглядит так:

render() {
    const { jobs, searchChange } = this.props
return (
  <React.Fragment>
    <Navigation />
    <Filter searchChange={searchChange} />
    <Categories searchChange={searchChange} />
    {jobs.map((job, index) => (
      <JobCard
        key={index}
        id={job.id}
        position={job.position}
        company={job.company}
        image={job.image}
        date={job.date}
      />
    ))}
  </React.Fragment>
)}

JobCard.js выглядит так:

render() {
    const { company, date, position, image, id } = this.props
    return (
      <Router>
        <Card data-cy="JobCard" to={`/jobs/${id}`}>
          <Image src={image} />
          <Position>{position}</Position>
          <Company>{company}</Company>
          <Date>
            <Moment format="D MMM">{date}</Moment>
          </Date>
        </Card>
      </Router>
    )
  }

Спасибо!

Answer 1

Мы используем React-Router и Redux для извлечения данных.

Наш путь в маршрутах:

            <Route path="jobs/:id" component={ Job }/>

в компоненте задания вам нужно будет получить ваши данные:

const mapStateToProps = ({ job }) => ({ job });

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators({
        fetchJob
    }, dispatch)
}
);

@connect(mapStateToProps, mapDispatchToProps)
export default class Job extends Component {

// your code here

}