3.23 React Twittler SPA

App.js

import React from 'react';
import './App.css';
import './global-style.css';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
// TODO - react-router-dom을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러오세요.


import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
import MyPage from './Pages/MyPage';
import About from './Pages/About';
// TODO - import문을 이용하여 MyPage, About 컴포넌트를 불러오세요.


const App = () => {
  return (
    <div>
      {/* TODO - BrowserRouter 컴포넌트를 작성합니다. */}
      <BrowserRouter> //최상위에 위치
      <div className="App">
        <main>
          <Sidebar />
          <section className="features">
            {/* TODO - Routes와 Route 컴포넌트를 이용하여 경로(path)를 설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. */}
           <Routes> //<Routes> 컴포넌트는 <Route> 컴포넌트를 감싼다.
                    //리액트는 "/" 와 "/" 뒤에 내용이 붙어있는 것 구분을 못하기 때문에 <Routes> 컴포넌트로 감싸준다.
           {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
             <Route path="/" element={<Tweets />} /> 
             <Route path="/mypage" element={<MyPage />} /> 
             <Route path="/about" element={<About/>} />
           </Routes>
           <Tweets />
          </section>
        </main>
        
      </div>
      </BrowserRouter>
    </div>
  );
};

// ! 아래 코드는 수정하지 않습니다.
export default App;

 

Sidebar.js

import React from 'react';
// TODO - import문을 이용하여 react-router-dom 라이브러리의 Link 컴포넌트를 불러옵니다.
import {Link} from 'react-router-dom';

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* 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>
      {/*Link가 i를 감싸도록 */}
    </section>
  );
};

export default Sidebar;