使用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

}