React Routing

version

react : ^18.2.0

react-dom : ^18.2.0

react-router-dom : ^6.22.1

react-scripts : 5.0.1

해당 리엑트 버전에서 라우팅을 하기 위해서 Library를 설치하자.

$npm install react-router-dom

$yarn add react-router-dom

먼저 index.js에 가서 해당 App 컴포넌트를 BroserRouter로 감싸준다.

import React from "react"

import ReactDOM from "react-dom/client"

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

import App from "./App"

import "./index.css"

import reportWebVitals from "./reportWebVitals"

const root = ReactDOM.createRoot(document.getElementById("root"))

root.render(

<React.StrictMode>

<BrowserRouter>

<App />

</BrowserRouter>

</React.StrictMode>

)

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals()

사진1) src폴더에 components폴더 생성

라우팅 하기 위해서 폴더를 사진1과 같이 생성한다. components폴더 안에 computer, keyboard 그리고 mouse가 들어가야 한다.

// src/components/computer/computer.component.jsx

const ComputerComponent = () => {

return (<div>현재 컴퓨터 페이지 입니다.</div>)

}

export default ComputerComponent;

// src/components/keyboard/keyboard.component.jsx

const KeyboardComponent = () => {

return (<div>현재 키보드 페이지 입니다.</div>)

}

export default KeyboardComponent;

// src/components/mouse/mouse.component.jsx

const MouseComponent = () => {

return (<div>현재 마우스 페이지 입니다.</div>)

}

export default MouseComponent;

위의 3개의 컴포넌트를 만들어 줍니다.

import { Fragment } from "react"

import { Route, Routes } from "react-router-dom"

import "./App.css"

import ComputerComponent from "./components/computer/computer.component"

import KeyboardComponent from "./components/keyboard/keyboard.component"

import MouseComponent from "./components/mouse/mouse.component"

import NavigationComponent from "./route/navigation/navigation.component"

// Home을 표시할 컴포넌트

const HomeComponent = () => {

return <div>This is a HomePage</div>

}

// Fragment는 리엑트에서 html컴포넌트로 만들때 무시하는 컴포넌트 입니다.

function App() {

return (

<Fragment>

<Routes>

<Route path="/" element={<NavigationComponent />}>

<Route index={true} element={<HomeComponent />} />

<Route path="computer" element={<ComputerComponent />} />

<Route path="keyboard" element={<KeyboardComponent />} />

<Route path="mouse" element={<MouseComponent />} />

</Route>

</Routes>

</Fragment>

)

}

위의 App.js코드를 위처럼 변경해 줍니다. 

여기서 react-router-dom을 사용하기 위해서는 2가지가 필요합니다. "Routes"와 "Route"입니다. Routes는 가장 최상단 컴포넌트에서 한번 사용하면 되고 그 다음부터는 Route를 사용합니다. 

기본적으로 루트 url에서 index={true}는 해당 컴포넌트로 출력해 줍니다.

/* src/App.css */

* {

padding-left: 50px;

}

클릭하면 위와같이 아래 컴포넌트로 변경되는 것을 알수 있습니다.

gitHub : https://github.com/Alex-Choi0/react-route-excerise.git