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

您需要在Job Component中获取数据：

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

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

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

// your code here

}

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

1 个答案: