[라우팅] react-router-dom 사용하여 hash router 적용하기

1페이지로 만들었던 리액트 프로젝트에 화면을 하나 추가했다.

라우팅이 필요해졌다.

react-router-dom 을 사용해서 간단하게 처리해보자.

 

 

 

 

 

먼저 기존 App.tsx 파일을 확인해보자.

import React from 'react';
import Summary from "./dungeon/Summary";
import logo from '../diablo4_logo2.png';
import './App.scss';

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>             
            </header>
            <Summary/>
        </div>
    );
}

export default App;

헤더 아래 메인 컨텐트 1개 있는 구조이다.

 

 

 

 

 

이 코드에 router를 적용하기 위한 주요한 작업은  <Summary/> 부분을 RouterProvider 로 변경하는 것이다.

 

 

 

 

 

import React from 'react';
import {createHashRouter, RouterProvider} from "react-router-dom";
import Summary from "./dungeon/Summary";
import Area from "./Area";

import logo from '../diablo4_logo2.png';
import './App.scss';

const router = createHashRouter([
    {
        path: '/',
        element: <Summary/>
    },
    {
        path: '/area',
        element: <Area/>
    }
])

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>              
            </header>
            <RouterProvider router={router}/>
        </div>
    );
}

export default App;

 

 

 

 

createHashRouter 를 이용해서 RouterProvider 속성에 바인딩할 변수를 하나 만들어주고

<Summary/> 부분을 RouterProvider 로 변경 하였다.

 

 

 

 

https://leessony.github.io/diablo4

디아블로4 던전 가이드

 

 

 

 

 

참고문서

- https://reactrouter.com/en/main/routers/create-hash-router