라우터 설정한 방법
1.
Router.tsx 파일 안에 RouteProvider를 만들어 export 한다.
// react-router-dom 라이브러리 임포트
import { BrowserRouter, Routes, Route } from 'react-router-dom';
// 연결하고자 하는 페이지들 임포트
import MainPage from './pages/MainPage';
import SettingPage from './pages/SettingPage';
import ConfirmPage from './pages/ConfirmPage';
// 라우팅 경로를 나타내는 상수를 정의하는 열거형(enum: 경로 문자열)을 생성
// 물론 안하고 아래에 그냥 경로 써주어도 됨
export enum RoutePath {
Root = '/',
Setting = '/setting',
Confirm = '/confirm',
}
// RouteProvider에 특정 경로에 대응하는 컴포넌트를 지정
const RouteProvider = () => {
return (
<BrowserRouter>
<Routes>
<Route path={RoutePath.Root} element={<MainPage />} />
<Route path={RoutePath.Setting} element={<SettingPage />} />
<Route path={RoutePath.Confirm} element={<ConfirmPage />} />
</Routes>
</BrowserRouter>
);
};
export default RouteProvider;
TypeScript
복사
2.
만들어 두었던 RouteProvider를 App.tsx에 import 한다.
import RouteProvider from './Router';
function App () {
return (
<RouteProvider/>
);
}
export default App;
TypeScript
복사
3.
연결된 페이지에는 Link를 import한다.
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
const MainPage = () => {
return (
<Container>
<TitleContainer>
🔀 랜덤 피커
</TitleContainer>
<ButtonsContainer>
<SettingButton>
<Link to ='/setting'>참여자 설정</Link>
</SettingButton>
<WinnerPickerButton>
<Link to ='/pick'>당첨자 뽑기</Link>
</WinnerPickerButton>
</ButtonsContainer>
</Container>
)
}
JavaScript
복사