[Kossie Coder] routes 파일 만들기

// 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 */