I'm making shopping page with React.

I want to go detail page when i click a goods image.

I was trying to get goods's id that clicked to me by <Link className='product-link' to={/goods/${id}}> this code in GoodsList code.

and then, In GoodsDetail code, i was trying to get goods's id that cliked to me and to render the goods's data

But it seems that the in the GoodsList code doesn't work well.

when i click the goods image, page doesn't go to goods/{id}, but go to goods/undefined.

How can i fix my code?

This is App.js code

import React from 'react';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages';
import Sell from './pages/sell';
import Search from './pages/search';
import AboutMe from './pages/aboutme';
import Login from './pages/login';
import TradeRecord from './pages/traderecord';
import SignUp from './pages/signup';
import Zzim from './pages/zzim';
import Selling from './pages/selling';
import Goods from './pages/goods';


const App = () => {
  
  return (
    <div className='App'>
      <BrowserRouter>
       <Navbar />
          <Routes>
            <Route path="/" element={<Home />}></Route>
            <Route path="/sell" element={<Sell />}></Route>
            <Route path="/search" element={<Search />}></Route>
            <Route path="/signup" element={<SignUp />}></Route>
            <Route path="/login" element={<Login />}></Route>
            <Route path="/aboutme" element={<AboutMe />}></Route>
            <Route path="/selling" element={<Selling />}></Route>
            <Route path="/zzim" element={<Zzim />}></Route>
            <Route path="/traderecord" element={<TradeRecord />}></Route>
            <Route path="/goods/:id" element={<Goods />}></Route>
          </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App;

This is Goods List page code

import React, {useState, useEffect} from 'react';
import { Link, useParams } from 'react-router-dom';
import axios from 'axios';
import './index.css';

const SearchView  = (props) => {
    const [boards, setBoards] = useState([]);
    const {id} = useParams();
  
  useEffect(() => {
    (async function () {
      const response = await axios.get("https://27.96.131.85:8443/api/boards")
        .catch((err) => {
          console.log(err);
        });
      const boards = response.data;
      
      setBoards(boards);
      console.log(response.data);
    })();
  }, []);

    return(
        <div>
            <hr />
            <div id='product-list'>
                {
                    boards.map(function(boards, index){
                        return (
                            <div className='product-card'>
                                <Link className='product-link' to={`/goods/${id}`}>
                                    <div>
                                    {
                                    boards.boardImages[0]
                                    ? <img className="product-img" width="100" height="100"
                                      src={`https://27.96.131.85:8443/api/images/${boards?.boardImages[0]?.id}`} />
                                    : <img className="product-img" width="100" height="100" src={require("../../images/noImage.png")} />  
                                    }                                 
                                    </div>
                                    <div className='product-contents'>
                                        <span className='product-name'>
                                            {boards.goodsName}
                                        </span>
                                        <span className='product-price'>
                                            {boards.price}원
                                        </span>
                                        <div className='product-seller'>
                                            <span>{boards.writer}</span>
                                        </div>
                                    </div>
                                </Link>
                            </div>
                        )
                    })
                }
            </div>
         </div>
    );
};

export default SearchView;

This is Goods detail code

import { useParams } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";

const Goods  = (props) => {
  const [boards, setBoards] = useState({});
  const [images, setImages] = useState([]);
  const {id}  = useParams();

  useEffect(() => {
    (async function () {
      const response = await axios.get(`https://27.96.131.85:8443/api/boards/${id}`, {
        withCredentials: true,
      });
      const boards = response.data;
      const images = boards.boardImages;
      console.log(response.data);

      setBoards(boards);
      setImages(images);

    })();
  }, []);

    return(
      <div id="product">
      상품명: <span className="product-name">{boards.goodsName}</span>
      <br />
      가격: <span className="product-price">{boards.price}원</span>
      <div className="product-seller">
        작성자: <span>{boards.writer}</span>
      </div>
      <div className="product-isSale">
        판매여부: <span>{boards.sale?.toString()}</span>
      </div>
      <div className="product-isLiked">
        찜 여부: <span>{boards.liked?.toString()}</span>
      </div>
      <div className="product-atCreated">
        작성 시간: <span>{boards.createdDateTime}</span>
      </div>
      <div className="product-atModified">
        수정 시간: <span>{boards.modifiedDateTime}</span>
      </div>
      <div className="product-images">
        {
          images.map((image) => {
            return (
              <img className="product-img" width="100" height="100"
                src={`https://27.96.131.85:8443/api/images/${id}`} />
            )
          })
        }
      </div>
    </div>
    );
};

export default Goods;

CodePudding user response：

I think it should be boards.id, instead of id..

<Link className='product-link' to={`/goods/${id}`}>

Can you please share your data structure?

CodePudding user response：

There is a mistake in your goods list page code,

solution:

{boards.map(function (boards, index) {
    return (
      <div className="product-card">
        <Link className="product-link" to={`/goods/${boards.id}`}>
          <div>
            {boards.boardImages[0] ? (
              <img
                className="product-img"
                width="100"
                height="100"
                src={`https://27.96.131.85:8443/api/images/${boards?.boardImages[0]?.id}`}
              />
            ) : (
              <img
                className="product-img"
                width="100"
                height="100"
                src={require("../../images/noImage.png")}
              />
            )}
          </div>
          <div className="product-contents">
            <span className="product-name">{boards.goodsName}</span>
            <span className="product-price">{boards.price}원</span>
            <div className="product-seller">
              <span>{boards.writer}</span>
            </div>
          </div>
        </Link>
      </div>
    );
  })}

as you used the map function to iterate over the boards array, and you've assigned variable name 'boards' to each element of the array so the variable boards itself is an object that contains the id property.

so you have to write boards.id to fix your issue

I hope this might help you