[React] React생성부터 Node.js 연동까지 - 3) Router 설정

• React 앱 생성

[React] React생성부터 Node.js 연동까지 - 2) 프로젝트 Import 경로 설정

# 프로젝트 구조

• components에 Router.js 생성
• Pages에 test폴더 생성 후 Test.js , TestNew.js 생성

# react-router-dom 설치

npm install react-router-dom

# 코드

# Test.js

export default function Test(){
    return(
        <>Test</>
    )
}

#TestNew.js

export default function TestNew(){
    return(
        <>TestNew</>
    )
}

#Router.js

import { Route, Routes, Navigate } from 'react-router';
import Test from 'pages/test/Test';
import TestNew from 'pages/test/TestNew';

export default function Router() {
    return (
        <>
            {/** 경로 설정 */}
            <Routes>
                <Route path="/" element={<Test />} />   {/** 루트(/) 경로를 라우터로 잡아줌 */}
                <Route path="/test/new" element={<TestNew />} />

                {/** 설정된 경로를 제외한 나머지 경로로 접속한 경우 루트 페이지로 이동 */}
                <Route path="*" element={<Navigate replace to="/" />} />
            </Routes>
        </>
    );

}

#App.js

• App.js를 라우터 페이지로 변경

import Router from 'components/Router';
function App() {

  return <Router/>;
}

export default App;

# index.js

여기서 끝나는게 아니라 index.js에 추가 설정이 필요합니다

• BrowserRouter 부분 추가

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
);

# 결과

• 경로 입력해서 들어가면 각 페이지 잘 뜨는거 확인

npm start