Reactjs 组件未在React路由器上渲染

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

当我点击url时，它的行为与我想要的一样，带有文章的id，但是页面是空的，控制台上没有显示任何内容（甚至我的console.log）

类JobCard扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
孤岛加载：正确
};
}
组件willmount（）{
获取（url）
.then（data=>data.json（））
。然后（结果=>
这是我的国家({
数据：结果，
孤岛加载：false
})
);
}
render（）{
如果（this.state.isLoading==true）返回；
否则{
const{match}=this.props；
返回(
{data.map（作业=>(
(
{地点.州.餐馆}
{location.state.article}
{location.state.position\u name}
你好
)
出口违约物品；

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;

从“React”导入React，{Component}；
从“react dom”导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“/components/Cards/JobCard”导入工作卡；
类应用程序扩展组件{
render（）{
返回(
你好，世界


工作卡


);
}
}
渲染(
,
document.getElementById（“根”）
);
导出默认应用程序；

您正在JobCard组件的data.map循环内定义文章路由。它应该在循环外。这会在您的案例中导致问题。

您正在JobCard组件的data.map循环内定义文章路由。它应该在循环外。这会在您的案例中导致问题。

错误是什么是否登录到浏览器控制台？在

作业中引用的
url
变量在哪里。componentWillMount

已声明？请编辑您的问题以提供此信息。url引用的是我制作的rest api，它只是一个JSON api！我在控制台上没有收到任何错误，就在单击I访问组件文章时在url中获取我想要的Id，但组件是空的。.我尝试从该演示中复制该Id。浏览器控制台中记录的错误是什么？在

作业中引用的
url
变量在哪里。声明的组件将装载

？请编辑您的问题以提供此信息。url引用的rest api我使它只是一个JSON api！控制台上没有任何错误，只是当我点击访问组件文章时，我在url中获得了我想要的Id，但组件是空的..我尝试从演示中复制它，甚至在数据之外。映射组件文章甚至在数据之外也没有渲染。映射组件aArticle未渲染

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;

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;