import Page from './Page';
๊ฒฝ๋ก๋ฅผ ๋งค์นญํด์ฃผ๋ ์ญํ ์ ํ๋ ์ปดํฌ๋ํธ์ ๋๋ค.
<Routes>
์ปดํฌ๋ํธ๋ ์ฌ๋ฌ <Route>
์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ธ์ ๊ทธ์ค ๊ฒฝ๋ก๊ฐ ์ผ์นํ๋ ๋จ ํ๋์ ๋ผ์ฐํฐ๋ง ๋ ๋๋ง์ ์์ผ์ฃผ๋ ์ญํ ์ ํฉ๋๋ค.<Route>
์ปดํฌ๋ํธ๋ path
์์ฑ์ ์ง์ ํ์ฌ ํด๋น path
์์ ์ด๋ค ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ค์ง ์ ํฉ๋๋ค.<Routes>
{/* ๊ฒฝ๋ก๋ path๋ก ์ปดํฌ๋ํธ๋ element๋ก ์ฐ๊ฒฐํด ์ค๋๋ค. */}
<Route path="/" element={<Home />} />
<Route path="/mypage" element={<MyPage />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
๊ฒฝ๋ก๋ฅผ ์ฐ๊ฒฐํด ์ฃผ๋ ์ญํ ์ ํ๋ ์ปดํฌ๋ํธ์ ๋๋ค.
<Link>
์ to
์์ฑ์ ํ์ฉํ์ฌ <Route>
์ปดํฌ๋ํธ์ ์ค์ ํด ์ค path
์ฃผ์๋ฅผ ์ฐ๊ฒฐํด ์ค๋๋ค.<li>
<Link to="/">Home</Link>{/* Link ์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํ์ฌ ๊ฒฝ๋ก๋ฅผ ์ฐ๊ฒฐํฉ๋๋ค */}
</li>
<li>
<Link to="/mypage">MyPage</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
https://github.com/forhrever/fe-sprint-react-twittler-spa.git
react-router-dom
์ npm์ผ๋ก ์ค์นํด์ผ ํฉ๋๋ค.npm install react-router-dom@^6.3.0 // ํฐ๋ฏธ๋์ ์์ฑ
App.js
)import
๋ฅผ ์ด์ฉํ์ฌ Tweets, MyPage, About ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ต๋๋ค.// TODO - import๋ฌธ์ ์ด์ฉํ์ฌ MyPage, About ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ค์ธ์.
import Tweets from './Pages/Tweets';
import MyPage from './Pages/MyPage';
import About from './Pages/About';
Sidebar.js
)<i className="far fa-question-circle"></i>
์ ๋ฃ์ด์ผ ํฉ๋๋ค.<i className="far fa-user"></i>
์ ๋ฃ์ด์ผ ํฉ๋๋ค.{/* TODO : About ๋ฉ๋ด ์์ด์ฝ๊ณผ Mypage ๋ฉ๋ด ์์ด์ฝ์ ์์ฑํ๊ณ Link ์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํ์ฌ ๊ฒฝ๋ก(path)๋ฅผ ์ฐ๊ฒฐํฉ๋๋ค. */}
<Link to = "/">
<i className="far fa-comment-dots"></i>
</Link>
<Link to = "/about">
<i className="far fa-question-circle"></i>
</Link>
<Link to = "/mypage">
<i className="far fa-user"></i>
</Link>
Tweets.js
)import
๋ฅผ ์ด์ฉํ์ฌ Footer ์ปดํฌ๋ํธ๋ฅผ ์ฐ๊ฒฐํฉ๋๋ค.// TODO - import๋ฌธ์ ์ด์ฉํ์ฌ Footer ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ค์ธ์.
import Footer from '../Footer';
<span className="tweetForm__count__text">
{/* dummyTweets์ ๊ธธ์ด๋งํผ ํธ์์ด ๋ณด์ฌ์ผ ํฉ๋๋ค */}
{'total: ' + dummyTweets.length}
</span>
MyPage.js
)import
๋ฅผ ์ด์ฉํ์ฌ Footer ์ปดํฌ๋ํธ๋ฅผ ์ฐ๊ฒฐํฉ๋๋ค.kimcoding
์ด ์์ฑํ ํธ์๋ง ๋ณด์ฌ์ผ ํฉ๋๋ค.// TODO - import๋ฌธ์ ์ด์ฉํ์ฌ Footer ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ต๋๋ค.
import Footer from "../Footer";
{/* TODO : dummyTweets์ค kimcoding ์ด ์์ฑํ ํธ์ ๋ฉ์ธ์ง๋ง ์์ด์ผ ํฉ๋๋ค. */}
<li className="tweet" id ={"1"}>
<div className="tweet__profile">
<img src={filteredTweets[0].picture} />
</div>
<div className="tweet__content">
<div className="tweet__userInfo">
<span className="tweet__username">{filteredTweets[0].username}</span>
<span className="tweet__createdAt">{filteredTweets[0].createdAt}</span>
</div>
<div className="tweet__message">{filteredTweets[0].content}</div>
</div>
</li>
App.js
)<BrowserRouter>
, <Routes>
, <Route>
๋ก React Router ๋ฌธ๋ฒ์ ๋ง๊ฒ ์ปดํฌ๋ํธ๊ฐ ์์ด์ผ ํฉ๋๋ค.<Route>
์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํ์ฌ ๊ตฌ๋ถ ์ง์ด ์ค๋๋ค.Tweets
์ปดํฌ๋ํธ์ Route path๋ "/"์
๋๋ค.About
์ปดํฌ๋ํธ์ Route path๋ "/about"์
๋๋ค.MyPage
์ปดํฌ๋ํธ์ Route path๋ "/mypage"์
๋๋ค.// TODO - react-router-dom์ ์ค์น ํ, import ๊ตฌ๋ฌธ์ ์ด์ฉํ์ฌ BrowserRouter, Routes, Route ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ค์ธ์.
import { BrowserRouter, Routes, Route } from "react-router-dom";
{/* TODO - Routes์ Route ์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํ์ฌ ๊ฒฝ๋ก(path)๋ฅผ ์ค์ ํ๊ณ Tweets, Mypage, About ์ปดํฌ๋ํธ๋ฅผ ์ฐ๊ฒฐํฉ๋๋ค. */}
<Routes>
<Route path="/" element={ <Tweets />} />
<Route path="/mypage" element={<MyPage />} />
<Route path="/about" element={<About />} />
</Routes>
Sidebar.js
)<Link>
์ปดํฌ๋ํธ์ to
์์ฑ์ ์ฌ์ฉํ์ฌ SPA ๋ด์์ ํ์ด์ง ์ ํ์ ๋ฐ๋ฅธ URL ์
๋ฐ์ดํธ๋ฅผ ์งํํด์ผ ํฉ๋๋ค.Tweets
์ปดํฌ๋ํธ์ Route path๋ "/"์
๋๋ค.About
์ปดํฌ๋ํธ์ Route path๋ "/about"์
๋๋ค.MyPage
์ปดํฌ๋ํธ์ Route path๋ "/mypage"์
๋๋ค.import { Link } from 'react-router-dom';
// TODO - import๋ฌธ์ ์ด์ฉํ์ฌ react-router-dom ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ Link ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ต๋๋ค.
{/* TODO : About ๋ฉ๋ด ์์ด์ฝ๊ณผ Mypage ๋ฉ๋ด ์์ด์ฝ์ ์์ฑํ๊ณ Link ์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํ์ฌ ๊ฒฝ๋ก(path)๋ฅผ ์ฐ๊ฒฐํฉ๋๋ค. */}
<Link to = "/">
<i className="far fa-comment-dots"></i>
</Link>
<Link to = "/about">
<i className="far fa-question-circle"></i>
</Link>
<Link to = "/mypage">
<i className="far fa-user"></i>
</Link>