각각 스케줄 인덱스 값 url 파라미터 (/:index)

import React from "react";
import { useSelector, useDispatch } from "react-redux";

const Detail = (props) => {
  const schedule_list = useSelector((state) => state.schedule.list);
  console.log(schedule_list, props); //콘솔로 store 정보들이 잘들어 왔나 확인
  return <h1></h1>;
};

export default Detail;

App.js

 <Route path="/detail/:index" component={Detail} />

 

Schedule.js

 return (
          <ItemStyle
            key={index}
            onClick={() => {
              props.history.push("/detail/" + index);
            }}
          >
            {list}
          </ItemStyle>
        );

Detail.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";

const Detail = (props) => {
  const schedule_list = useSelector((state) => state.schedule.list);
  console.log(schedule_list, props); //콘솔로 store 정보들이 잘들어 왔나 확인

  const schedule_index = parseInt(props.match.params.index);

  //url 파라미터는 스트링으로 들어오는데 우리는 인덱스가 필요하다
  //index 값은 콜솔찍어보면 match 안 params에 있다
  //parseInt는 숫자형으로 바꿔준다
  return <h1>{schedule_list[schedule_index]}</h1>;
}; //여기서 보면 store에서 리스트를 가져오고  리스트의 인덱스 값을 파라미터 인덱스 값으로 받아와 클릭하면
//자연스럽게 그 리스트의 내용이 나올수 있게 만들어줬다

export default Detail;