[React] Router 추가하기

React Project 생성

Component 추가

 

React 1도 모르지만 Router 버전이 6일 때 뭔가 많이 달라졌나봄.

 

꽤 헤맸음. 덤으로 이 블로그 많이 참고했음.

 

1. react-router-dom 설치

npm install react-router-dom

 

 

2. NavComponent.js 내에 useNavigate 추가 및 코드 일부 수정

import React from "react";
import {useNavigate} from 'react-router-dom';

let nowPath = '/main';

const NavComponent = () => {
    let navigate = useNavigate();
    const pathList = [
        {name: 'Main', path: '/main'},
        {name: 'Sub', path: '/sub'}
    ]

    function pressedPageName(name) {
		navigate(name)
    }

    return (
        <div id="nav">
            {
                pathList.map((el, index) =>
                <div className={nowPath === el.path ? 'nav-path-none-click' : 'nav-path'}
                    key={index} onClick={()=>{
                        nowPath = el.path
                        pressedPageName(el.path)
                    }}
                >
                    {el.name}
                </div>)
            }
        </div>
    )
}

export default NavComponent;

 

 

3. App.js 내에 Route, Routes, useNavigate, Navigate 추가 및 코드 수정

import './styles/App.scss';
import {Route, Routes, useNavigate, Navigate } from 'react-router-dom';
import NavComponent from './components/NavComponent'
import MainView from './pages/MainView';
import SubView from './pages/SubView';



function App() {
	return (
		<div className="App">
			<NavComponent />
			<Routes>
				<Route path='/' element={<Navigate to="/main"/>}/>
				<Route path='/main' element={<MainView />}/>
				<Route path='/sub' element={<SubView />}/>
			</Routes>
		</div>
	);
}

export default App;

처음 실행하게 되면 path가 "/" 임.

이걸 redirect로 "/main"이 되도록 Navigate to="path" 작성함.

 

 

실행하게 되면

첫 실행 화면

Sub 클릭 시 화면

끝!