TIL) 스파르타 개발일지 23-01-19

타입 스크립트 프로젝트 시작

 

타입스크립트에서 라우터 설정방법

[ 1. 패키지 설치 ]

 

$ npm install react-router react-router-dom 
$ npm install -D @types/react-router @types/react-router-dom

 

 

[ 2. index.tsx에 BrowserRouter 추가 ]

 

import * as React from 'react';
import ReactDom from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDom.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.querySelector('#root'))
;

[ 3. App.tsx에 Route 설정 ]

 

App.tsx에서는 다음과 같이 Router설정을 해보겠습니다.

 

import * as React from 'react';
import { Route, Switch } from 'react-router';
import HelloReact from './helloReact';
import HelloTypeScript from './helloTypeScript';

const App = (): JSX.Element => {

    return (
        <Switch>
            <Route exact path='/helloReact' component={HelloReact}/>
            <Route exact path='/helloTypeScript' component={HelloTypeScript}/>
        </Switch>
    )
}

export default App;