Programming/React.js

[Node.js] React Router / 버전 6 사용법

MOONCO 2021. 11. 8. 17:14

React Router란?

 

[Node.js] React Router란? / 사용법 ( version 5 )

라우터의 왕 React Router란? React에서 Router 기능을 편리하게 사용할 수 있게 해주는 Node.js 패키지 Router란? URI와 화면을 연결해주는 기능을 하는 프로그램 다시, React Router란? React에서 각각의 URI에..

defineall.tistory.com

 

React Router 버전 6 사용법

//index.js

// Router 모듈 불러오기
import { render } from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Home from "./components/Home.js";

// React에게 화면을 표시할 부분(Dom) 알려주기위한 객체 만들기
const rootElement = document.getElementById("root");

//렌더링할때 라우터 바로 사용
render(
  <BrowserRouter>
    <Routes>
      // element에 표시할 컴포넌트 입력
      <Route exact path="/" element={<App/>}/>
      <Route path="/home" element={<Home/>}/>
    </Routes>
  </BrowserRouter>,
  rootElement
);

 

반응형