[React-Router] 리액트 라우터

npm install react-router-dom

설치는 위 커맨드로 한다.

 

import { BrowserRouter, Route, Routes } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <header><Header /></header>
      <main>
        <Routes>
          <Route path="/boardList" element={<BoardList />} />
          <Route path="/training" element={<Training />} />
          <Route path="/shop" element={<Shop />} />
          <Route path="/trip" element={<Trip />} />
          <Route path="/myPage" element={<MyPage />} />
        </Routes>
      </main>
      <footer></footer>
    </BrowserRouter>
  )
}

위와 같은 형태로 변화하는 몸체를 만든다.

BrowserRouter로 감싼 후

Routes 부분이 변화하는 부분인데

Route 태그에 path를 넣어 경로를 표현하고, element를 이용해 컴포넌트를 설정한다.

import { Link } from 'react-router-dom'

const Header = () => {
    return (
        <nav>
            <div className="navLeftSide">
                <h1><Link to="/">Animall</Link></h1>
            </div>
            <div className="navRightSide">
                <ul>
                    <li className="navFlexItem"><Link to="/boardList">Board</Link></li>
                    <li className="navFlexItem"><Link to="/training">Training</Link></li>
                    <li className="navFlexItem"><Link to="/shop">Shop</Link></li>
                    <li className="navFlexItem"><Link to="/trip">Trip</Link></li>
                    <li className="navFlexItem"><Link to="/myPage">Me</Link></li>
                </ul>
            </div>
        </nav>
    )
}

라우트 링크는 위와 같이 Link를 이용해 설정한다.

 

휴.. vue랑 달라서 헷갈렸지만 원리는 다르지 않아서 어렵게 느껴지지는 않았다.