#04 리액트 숙련 : 투두리스트의 상세페이지 연결하기(실패)

[원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용

TIL

▶원하는대로 구현이 안되고 있음..😢 조금 더 공부해봐야할 것 같음..!

▼구현 성공

#05 리액트 숙련 : 투두리스트의 상세페이지 연결하기(성공)

---

 

1. Router.js 에서 설정 완료

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

import Detail from '../pages/Detail';

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

const Router = () => {

    return (

        <BrowserRouter>

            <Routes>

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

                <Route path="detail" element={<Detail />}></Route>

            </Routes>

        </BrowserRouter>

    );

};

export default Router;

 

2. App.jsx 에서 설정 완료

 <div key={todo.id} style={{ border: '1px solid black', margin: '5px' }}>

                                    <Router>

                                        <Link to="/detail">디테일</Link>

                                    </Router>

                                    <h3>{todo.title}</h3>

                                    <p>{todo.contents}</p>

</ div >

 

 

끝.