使用动态路由将数据从单个 JSON 文件从父组件传递到 React 中的子组件

Question

I'm trying to create a project that makes use of React dynamic routes. Basically, my project does this: when I click on the Shop Page, a local JSON files is rendered in the Shop component, then when I click on an item from the Shop Component, a dynamic route is being created and its respective data is being show.

Eg : instead of showing the 'Description Placeholder' text, I want to display the cars description. In the case of Ford KA, I want it to display 'Mini', for the Ford Fiesta I want 'Hatchback' and so on.

How can I pass this data from a parent to a child component? I looked up on Google and some tutorials make use of two API: they are comparing the id of one API which holds a list of items to the id of the other API which holds the item details. The problem is that I don't think I can do this with a local JSON file. I tried passing some data as props from the Shop component to ShopItems, but my code caused a plethora of errors in the console, so I ended up erasing that code to make this functional again.

Here is my Code and a CodeSandbox link :

App.js

import React from 'react';
import './App.sass';
import Nav from './components/Nav';
import About from './components/About';
import Shop from './components/Shop';
import ShopItem from './components/ShopItem';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <Switch>
          <Route path='/' exact component={Home}/>
          <Route path='/about' component={About} />
          <Route path='/shop' exact component={Shop} />
          <Route path='/shop/:id' component={ShopItem} />
        </Switch>
      </div>
    </Router>
  );
}

const Home = () => {
  return (
  <div>
    <h1>Home Page</h1>
  </div>
)};

export default App;

Nav.js

import React from 'react';
import '../App.sass';
import { Link } from 'react-router-dom';
function Nav() {

  const navStyle = {
    color: 'white'
  };
  return (
    <div>
      <nav>
        <Link to='/'>
          <h3> Logo </h3>
        </Link>
        <ul className='nav-links'>
          <Link style={navStyle} to='/about'>
            <li>About</li>
          </Link>
          <Link style={navStyle} to='/shop'>
            <li>Shop</li>
          </Link>
        </ul>
      </nav>
    </div>
  );
}

export default Nav;

Nav.sass

nav
  display: flex
  justify-content: space-around
  align-items: center
  min-height: 10vh
  background: gray
  .nav-links
    width: 50%
    display: flex
    justify-content: space-around
    align-items: center
    list-style: none

Shop.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Shop extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {

  fetch('./data.json')
  .then((res) => res.json())
  .catch(err => console.log(err))
  .then((data) => {
    //console.log('data:', data);
    this.setState({
      data: data
    })
  })
}

  render() {
    const { data } = this.state
    return (
      <div>
        {data.map(data =>
          <h1>
            <Link to={`/shop/${data.id}`}>{data.name}</Link>
          </h1>)}
      </div>
    )
  }
}

export default Shop;

ShopItem.js

import React, { Component } from 'react';
class ShopItem extends Component {

  render() {
    return(
      <div>Description Placeholder</div>
    )
  }
}

export default ShopItem;

data.json

[{"id": 1,"name": "Ford Ka", "description": "Mini"},
{"id": 2, "name": "Ford Fiesta", "description": "Hatchback"},
{"id": 3, "name": "Ford Focus", "description": "Hatchback"},
{"id": 4, "name": "Ford Mondeo", "description": "Sedan"}
]

Answer 1

You Do like

class ShopItem extends Component {

  constructor(props) {
    super(props);
    this.state = {
      detail: {}
    };
  }

  componentDidMount() {

// getting the params id value here

 let id = this.props.match.params.redirectParam;
  fetch('./data.json')
  .then((res) => res.json())
  .catch(err => console.log(err))
  .then((data) => {

   ****// Updated filter to find the Id here****

    this.setState({
      detail: data.find(data => data.id === id);
    })
  })
}
 render() {
    return(
      <div>{this.state.detail.description}</div>
    )
  }
}