// App.js
import React from 'react';
import './index.css';
import Navbar from './components/Navbar';
🌟import routes from './routes';🌟
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<Navbar />
<div className="container">
<Switch>
🌟{routes.map((route) => {
return (
<Route key={route.path} path={route.path} exact>
<route.component />
</Route>
);
})}🌟
</Switch>
</div>
</div>
</Router>
);
}
export default App;
// routes.js
import Users from './pages/Users';
import Home from './pages/Home';
import Movies from './pages/Movies';
🌟export default [
{
path: '/',
component: Home,
},
{
path: '/movies',
component: Movies,
},
{
path: '/users',
component: Users,
},
];🌟
App.js에서 반복적으로 작성했던 코드를 map을 이용한 반복문을 통해 효율적으로 만들었다.
/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.
https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */
'React > Lecture' 카테고리의 다른 글
[Kossie Coder] (완강) user 페이지 (0) | 2022.01.22 |
---|---|
[Kossie Coder] user 페이지 라우트 추가 - useParams() (0) | 2022.01.21 |
[Kossie Coder] 로딩 Spinner 추가하기 (0) | 2022.01.15 |
[Kossie Coder] axios (0) | 2022.01.15 |
[Kossie Coder] NavLink 사용하기 (0) | 2022.01.15 |