다른 페이지 가져오기 - 라우팅

라우트 라이브러리 설치하기

npm install react-router-dom@6

 

index.js

import { BrowserRouter } from "react-router-dom";   -->  코드 추가

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>    -->  코드 추가해서
    <App />
  </BrowserRouter>   -->  감싼다
);

 

 

# 페이지를 모두 컴포넌트로 만들어서 분리시켜버리고

function Info(){
    return(
        <div> 공간소개</div>
    )
}

export default Info;   --> 괄호없이!!!  Info() 이렇게 하면 못찾는다!! 엄청 해맸넹.. ㅜㅜ

 

 

App.js 에서 

import './App.css';
import { Routes, Route, Link } from 'react-router-dom'

import Header from './pages/header.js';
import Footer from './pages/footer.js';
import Main from './pages/main.js';
import Info from './pages/info.js';
import Guide from './pages/guide.js';
import Event from './pages/event.js';


function App() {
  return (
    <div className="App">
      {/* 헤더 */}
      <Header></Header>
   
      {/* 페이지 분기 */}
      <Routes>
        <Route path="/" element={ <Main/> } />
        <Route path="/info" element={ <Info/> } />
        <Route path="/guide" element={ <Guide/> } />
        <Route path="/event" element={ <Event/> } />
      </Routes>

      
      {/* footer */}
      <Footer></Footer>
    </div>
  );
}


export default App;