使用match（）进行路由在React应用中不起作用

Question

I have a main page with job listings.

Once a user clicks on a specfic job listing, a new site route eg "homepage.com/jobs/12345" shall open the description of the clicked job.

All of the information for the jobs are stored in an array. Each job is stored in an object.

My Question: How can I show the description of the clicked job (description key from clicked job item) on a new route like in example URL above?

An item in the array looks like this:

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

Routing in App.js looks like this:

<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 looks like this:

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 looks like this:

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

Thanks!

Answer 1

We are using react-router and redux for fetching data.

Our way in routes:

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

in Job Component you will need to fetch your data:

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

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

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

// your code here

}