[React] React Router

Routing이란?

사용자가 요청한 URL에 맞는 페이지 보여주는 기능

React Router

사용자 입력 주소 감지, 다양한 라우터 컴포넌트 제공

• 공식 페이지

<https://reactrouter.com/en/main>

종류

• BrowserRouter
• HashRouter

설치

npm i react-router-dom

yarn add react-router-dom

import

path 설정, Link 설정

/*BrowserRouter*/
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

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

사용예 - Navbar 구현

App

• BrowserRouter 사용 위해 태그로 전체 감쌈
• Route 다중 사용 위해 Routes 태그로 감쌈

/*App.js*/

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

import NavBar from "./components/navbar/NavBar";
import Home from "./pages/Home";
import TopRate from './pages/TopRate';
import NowPlaing from './pages/NowPlaying';
import UpComming from './pages/UpComming';
import Detail from "./pages/Detail";

function App() {
  return (
    <Router>
      <NavBar/>
      <Routes>
        <Route path='/' element={<Home/>} />
        <Route path='/movie/:id' element={<Detail/>} />
        <Route path='/toprate' element={<TopRate/>} />
        <Route path='/nowplaying' element={<NowPlaing/>} />
        <Route path='/upcomming' element={<UpComming/>} />
      </Routes>
    </Router>
  )
}

export default App;

navbar 구현

• Link 태그로 path 설정

/*NavItems.js*/

import {Link} from "react-router-dom";
import "./NavBar.css";
import menubar from "./menubar.jpg";

function NavItems(){
    return(
        <div className="NavBar">
            <div className="Logo">J-Flix</div>

            <div className="NavMenus">
                <Link className="MenuList" to={'/'} >Home</Link>
                <Link className="MenuList" to={'/toprate'} >Top Rate</Link>
                <Link className="MenuList" to={'/nowplaying'} >Now Playing</Link>
                <Link className="MenuList" to={'/upcomming'} >Up Comming</Link>
            </div>

            <div>
                <img className="MenuBar" src={menubar} />
            </div>
        </div>
    )
}

export default NavItems;