[리액트] 페이지 이동시 데이터 전달 (Router element에 props 사용)

[문제]

Home.jsx에 있는 데이터를 Details.jsx에서도 사용하고 싶은데 데이터를 어떻게 가져와야할 지 모르겠음.

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import Home from '../pages/Home';

import Details from '../pages/Details';

const Router = () => {

    return (

        <BrowserRouter>

            <Routes>

                <Route path="/" element={<Home />}></Route>

                <Route path="detail/:id" element={<Details />}></Route>

            </Routes>

        </BrowserRouter>

    );

};

export default Router;

 

 

[해결]

Router에서 Home.jsx에서 사용하는 useState를 Router에서 사용하고 

각각 props로 전달하기.

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import Home from '../pages/Home';

import Details from '../pages/Details';

import { data } from '../shared/data';

import { useState } from 'react';

const Router = () => {

    const [comments, setComments] = useState(data);

    return (

        <BrowserRouter>

            <Routes>

                <Route path="/" element={<Home comments={comments} setComments={setComments} />}></Route>

                <Route path="detail/:id" element={<Details comments={comments} setComments={setComments} />}></Route>

            </Routes>

        </BrowserRouter>

    );

};

export default Router;