时间戳

首页 > 解决方案 > 使用 React Router 动态渲染组件的问题

reactjs - 使用 React Router 动态渲染组件的问题

问题描述

我正在开发个人网站，但在使用 React Router 动态渲染组件时遇到问题。对我来说，一切似乎都是正确的，但由于某种原因，它不起作用。

我尝试遵循文档并观看了一些教程，但我已经卡了很长时间，所以我觉得我需要帮助。

在这个组件中，我想使用 id 动态呈现“文章”组件

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 是正确的，所以我得到了 id，但我无权访问 Article 组件。我试图控制台日志，但没有出现。

标签： reactjsroutingreact-router

解决方案

而不是这个

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

尝试这样做

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

推荐阅读