React Router 不显示 json 文件中的内容答案

【问题标题】：React Router not displaying content from json fileReact Router 不显示 json 文件中的内容
【发布时间】：2021-01-07 13:57:16
【问题描述】：

你好 Stackoverflow 成员。我有 GLS 我有更多类似的组件 GLS 概念是相同的，但样式不是，无论如何我想要实现的是这个，当我按下位于 HomeComponent/MainPage 中的链接时在这种情况下，我想显示/渲染该组件的图像类和价格 A/GLS 组件由于某种原因它不想显示来自 json 文件“我可能是盲人”的数据。如果有人可以帮助我，我将不胜感激。

Gls Component
import React from "react";
import data from "../data.json";
import { Link } from "react-router-dom";
function GLS({product}) {
  return (
    <div>
          <div key={product.id} className="m-4 bg-blue-100 rounded-xl p-8 absolute ">
            <div>
              <Link
                to={`/payment/${product.id}`}
                className="py-1 px-2 text-black-600 h-10  ml-24 mt-32 bg-white w- 
            36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600"
              >
                Buy Now
              </Link>
              <img
                alt=""
                className="w-screen object-contain"
                src={product.image}
              ></img>
              <h1 className=" ml-24 md:text-5xl sm:text-5xl  top-8">
                {product.class}
              </h1>
              <h1 className="text-base font-mono ml-24 top-24">
                {product.price}
              </h1>
            </div>
          </div>
    </div>
  );
}

export default GLS;
App Component
import React,{useState, useEffect} from 'react'
import './assets/main.css'
import A from './Models/GLS Model/A'
import GLS from './Models/GLS Model/GLS'
import data from "./Models/data.json";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
return (
    <div className='' >       
     <div >
       <Router>           
        <Switch>
          <Route  path="gls">
          {data.map((product) => (
              <GLS key={product.id} product={product} />
            ))}
            </Route>
          <Route  path="a">
          {data.map((product) => (
              <A key={product.id} product={product} />
            ))}
         </Route> 
            <Route path="/payment/:productId">
            <Payment />
          </Route>
          <Route exact path="/">
            <Home />
          </Route>
        </Switch>  
       </Router>
     </div>
    </div> 
  );
}

export default App;

import React from 'react'
import {
    Link, 
  } from "react-router-dom";
import data from "./Models/data.json";

function Home() {
    return (
        <div className='ml-20'>
          <nav className='bg-red-50 max-w-full'>
            <ul >    
            <li>           
           <Link to='GLS'>GLS-class</Link>
            </li>           
            <li>
             <Link to="/A"> A-Class</Link>
            </li> 
          </ul>
        </nav>
        </div>
    )
}
export default Home


Payment Component

import React from "react";
import { useParams } from "react-router-dom";
import data from "./Models/data.json";

const Payment = () => {
  const { productId } = useParams();
  const filteredData = data.filter((product) => product.id === productId)[0];

  return (
    <div className="ml-20">
      <img alt="" className="w:2/4 object-contain " src={filteredData.image} />
      <h2
        className=" ml-24 mlg:ml-6 mlg:mt-2 mlg:static text-5xl mlg:text-2xl text-blue-400 absolute top- 
        48"
      >
        {filteredData.class}
      </h2>
      <h3
        className="text-lg  mlg:mb-2 mlg:ml-6  mlg:mt-2 mlg:static font-bold text-green-800 
                 font-mono ml-24 top-64  absolute"
      >
        {filteredData.price}
      </h3>
    </div>  
  );
};

export default Payment;

Json file
[
{
"id": 0,
"class": "A-Class",
"image": "./ModImages/Aclass.jpg",
"price": "It goes around $37,300",
},

{
"id": 1,
"class": "GLS-Class",
"image": "./ModImages/GLSclass.jpg",
"price": "It goes around $47,700"

}
]

【问题讨论】：

标签： javascript arrays json reactjs

【解决方案1】：

改变

<Route path="gls">

到

<Route path="/gls">

在App Component

改变

<Link to='GLS'>GLS-class</Link>

到

<Link to='/gls'>GLS-class</Link>

在Home Component 并改变

{
"id": 0,
"class": "A-Class",
"image": "./ModImages/Aclass.jpg",
"price": "It goes around $37,300",
},

{
"id": 1,
"class": "GLS-Class",
"image": "./ModImages/GLSclass.jpg",
"price": "It goes around $47,700"
}
]

到

[
 {
  "id": 0,
  "class": "A-Class",
  "image": "./ModImages/Aclass.jpg",
  "price": "It goes around $37,300"
 },
 {
  "id": 1,
  "class": "GLS-Class",
  "image": "./ModImages/GLSclass.jpg",
  "price": "It goes around $47,700"
 }
]

在datajson 文件中

【讨论】：