16 asked

0

history 패키지는 react-router와 함께 설치되는 패키지입니다. react-router(또는 react-router-dom)은 실습화면에서 메뉴를 구성하기 위해 사용합니다. 강좌가 만들어졌던 시점이 지난 터라 현재 버전의 패키지를 설치하면 drizzle 처럼(@drizzle/react와 drizzle-react처럼) 변경된 사항들이 다수 발생합니다.

일단 app 디렉토리에서 react-router-dom을 설치하십시오.

npm install react-router-dom 

그리고 App.js에서 다음과 같이 import 하십시오.

import { BrowserRouter as Router } from 'react-router-dom';

그리고 원래 있던 import { Router } from 'react-router'; 은 삭제하십시오.

import store, {history} from "./store"; 에서 history를 삭제하고 store만 import 하십시오. 그렇게 되면 

 <Router history={history}> 에서 history 속성은 제거해도 됩니다. react-router-dom의 BrowserRouter로 동일한 결과를 얻을 수 있습니다. 

그 다음에 store.js는 다음과 같이 수정하십시오.

import { createStore, applyMiddleware, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { generateContractsInitialState } from 'drizzle'
import drizzleOptions from './drizzleOptions'
import reducer from './reducer'
import rootSaga from './rootSaga'

const sagaMiddleware = createSagaMiddleware()

const initialState = {
    contracts: generateContractsInitialState(drizzleOptions)
}

const store = createStore(
    reducer,
    initialState,
    compose(
        applyMiddleware(
            sagaMiddleware
        )
    )
)

sagaMiddleware.run(rootSaga)

export default store

routingMiddleware는 필요가 없으므로 그냥 제거한 것입니다. 

그리고 Home.js에서는 react-router-dom 에서 Route와 Link 모듈을 참조하면 됩니다. import { Route } from 'react-router'은 삭제합니다.

import { Route, Link } from 'react-router-dom'