[React] react-router 설치 및 세팅

2023. 12. 23. 12:15· 기존(310)/🐳React
목차
  1. 1. 설치

사용하기

1. 설치

  • npm
npm install react-router-dom@6

 

 

🐳 App.js 로 돌아가서

import {BrowserRouter} from "react-router-dom";

 

🐳  App.js 페이지

import "./App.css"
import {BrowserRouter} from "react-router-dom";

function App() {
    return (
        <BrowserRouter> <== 이걸로 감싸줘야 라우터기능 작동
        <div className="App">
            <h2>App.js</h2>
        </div>
        </BrowserRouter> <== 이걸로 감싸줘야 라우터기능 작동
    );
}

export default App;

 

 

🐳  4가지의 페이지를 생성

 

 

🐳   App.js 진입

 

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

import RouterTests from './components/RouterTest'
import Home from "./pages/Home"
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

function App() {
    return (
        <BrowserRouter>
        <div className="App">
            <h2>App.js</h2>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/new' element={<New />} />
                <Route path='/edit' element={<Edit />}/>
                <Route path='diary' element={<Diary />}/>
            </Routes>
            <RouterTests />
        </div>
        </BrowserRouter>
    );
}

export default App;

 

🐳  페이지 추가

import RouterTests from './components/RouterTest'
import Home from "./pages/Home"
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";


페이지 import 해주기

 

🐳  라우는 경로 추가

  <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/new' element={<New />} />
                <Route path='/edit' element={<Edit />}/>
                <Route path='diary' element={<Diary />}/>
            </Routes>

 

 

🐳   컴포넌트 추가

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

const RouterTest = () => {
    return <>
        <Link to={'/'}>Home</Link>
        <br/>
        <Link to={'/diary'}>DIARY</Link>
        <br/>
        <Link to={'/new'}>NEW</Link>
        <br/>
        <Link to={'/edit'}>EDIT</Link>
        <br/>
    </>
}

export  default  RouterTest;

 

 

 

저작자표시 (새창열림)

'기존 > 🐳React' 카테고리의 다른 글

[React] Header component 사용하기  (1) 2023.12.23
[React] Button component 사용하기  (0) 2023.12.23
[React] process.env.PUBLIC_URL 설정  (0) 2023.12.23
[React] react-router 응용편, Path Variable, Query String  (0) 2023.12.23
[React] springboot & React 프로젝트 생성  (0) 2023.12.23
  1. 1. 설치
'기존(310)/🐳React' 카테고리의 다른 글
  • [React] Button component 사용하기
  • [React] process.env.PUBLIC_URL 설정
  • [React] react-router 응용편, Path Variable, Query String
  • [React] springboot & React 프로젝트 생성
조각남자
조각남자
프로그래밍 기술 및 저장소
조각남자프로그래밍 기술 및 저장소
조각남자
조각남자
조각남자
전체
오늘
어제
  • 전체 보기
    • Java
      • Spring
    • 기존
      • 🏀Jsp
      • 🏀Spring
      • 🏀Pom.xml
      • 🏀SpringBoot
      • 🏀JavaExcption
      • 🏀JavaDB
      • 🏀SpringBootCloneWebSite
      • 🏀SptringDependency
      • 🏀JpaEnvorinoment
      • 🏀Thymeleaf
      • 🏀Node
      • 🏀Pyton
      • 🏀DataBase
      • 🏀JavaScript
      • 🏀Android
      • 🏀JPA
      • 🏀Flutter
      • 🐸Utils
      • 🎫 Batch
      • 🎞️JenKins
      • 🎈Python
      • 🎗️AWS
      • 🦠Vue
      • 🐳React
      • 🖲️kafka
      • Next.js

공지사항

  • 공지사항

인기 글

태그

  • D

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.1
조각남자
[React] react-router 설치 및 세팅
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.