React + TypeScript 기반 Router 설정하기

React + TypeScript 기반 프로젝트 생성

npx create-react-app [Project name] --template typescript

 

※ 아래와 같은 오류 발생 시

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instructions for creating a new app can be found here: https://create-react-app.dev/docs/getting-started/

 

1. npm uninstall -g create-react-app
2. npm add create-react-app
3. npx create-react-app [Project Name] --template typescript

---

Router 설정

npm i react-router-dom

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './pages/Home';
import NotFound from './pages/NotFound';
import Signin from './pages/Signin';

function App() {
  return (
      <BrowserRouter>
        <Switch>
          <Route path='/signin' component={Signin} />
          <Route exact path='/' component={Home} />
          <Route component={NotFound} />
        </Switch>
      </BrowserRouter>
  );
}

export default App;

 

※ react-rouder-dom v6은 v5와 Router 설정 방식 변경

 

(JSX attribute) exact: true
Type '{ exact: true; path: string; component: Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. Property 'exact' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.ts(2322)

 

(JSX attribute) component: JSX.Element
Type '{ path: string; component: Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. Property 'component' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.ts(2322)

 

import Switch
Module '"react-router-dom"' has no exported member 'Switch'.ts(2305)

 

• 위와 같은 오류 발생 시, 아래와 같이 코드 수정

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import NotFound from './pages/NotFound';
import Signin from './pages/Signin';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/signin' element={<Signin />} />
        <Route path='/' element={<Home />} />
        <Route element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

★ 변경사항

 

1. Switch Component -> Routes Component
2. Route Component Props: component -> element ( element에 component로 전달)
3. Route Component Props: exact 선언 x

---

[ 참고자료 ]

https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md

https://stackoverflow.com/questions/69866581/property-exact-does-not-exist-on-type