Question

我在一个个人网站上工作，但在使用React Router动态渲染组件时遇到问题。在我看来，一切似乎都是正确的，但是由于某种原因，它无法正常工作。

我试图遵循文档并观看了一些教程，但是我被困了很长时间，所以我觉得需要帮助。

在此组件中，我想使用id动态呈现“ Articles”组件

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;

当我单击Card时，URL是正确的，因此我获得了ID，但无权访问Article组件。我尝试控制台日志，但是什么也没出现。

Answer 1

代替这个

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

尝试这样做

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

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

1 个答案: