组件未在 React Router 上呈现答案

【问题标题】：Component is not rendering on React Router组件未在 React Router 上呈现
【发布时间】：2019-05-12 04:53:02
【问题描述】：

我创建了一个卡片组件，点击时我想渲染一些文章，我正在尝试使用 react，但我不知道我的代码有什么问题（我是初学者）。

当我单击 url 时，文章 id 的行为与我想要的一样，但页面是空白的，控制台上什么也没有出现（甚至是我的 console.log）


class JobCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: true
    };
  }

  componentWillMount() {
    fetch(url)
      .then(data => data.json())
      .then(result =>
        this.setState({
          data: result,
          isLoading: false
        })
      );
  }

  render() {
    if (this.state.isLoading === true) return <LoadingSpinner />;
    else {
      const { match } = this.props;
      return (
        <>
          <div>
            {data.map(job => (
              <div>
                <div key={job._id} className="blog-card">
                  <div className="meta"
                          <Link
                            to={{
                              pathname: `${match.url}/${job._id}/${
                                job.position_name
                              }`,
                              state: job
                            }}
                          >
                            {job.workplace_name}
                          </Link>{" "}
                          Job Restaurant
                        </span>
                      </p>
                    </p>
                  </div>
                </div>

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

export default JobCard;

未呈现的文章组件：

import React from 'react'

const Articles = ({ location }) => (
    <div>
      <h1>{location.state.restaurant}</h1>
      <h2>{location.state.article}</h2>
      {location.state.position_name}
      <h4>Hello</h4>
    </div>
  )

  export default Articles;

Ant the App.js


import React, { Component } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import JobCard from "./components/Cards/JobCard";

class App extends Component {
  render() {
    return (
      <div>
      <div>
        hello World
      </div>
        <ul>
          <li>
            <Link to="/JobCard">JobCard</Link>
          </li>
        </ul>

        <Route exact path="/JobCard" component={JobCard} />
      </div>
    );
  }
}

render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

export default App;

【问题讨论】：

浏览器控制台记录的错误是什么？ Job.componentWillMount 中引用的 urlvariable 在哪里声明？请编辑您的问题以提供此信息。
这个url引用了一个rest api，我把它做成了一个json api！而且我在控制台上没有收到任何错误，就在我点击访问组件文章时，我根据需要在 url 中获取了 Id，但组件为空..
我尝试复制这个stackblitz.com/edit/react-router-dynamic-routes?file=Topics.js
从演示中看起来不错

标签： reactjs react-router

【解决方案1】：

您正在 JobCard 组件的 data.map 循环内定义 Articles Route。它应该在循环之外。在您的情况下，这会导致问题。

【讨论】：

即使在 data.map 之外，组件文章也不会呈现