React Routerをv3からv4に更新したがエラーが出る
Q&A
Closed
3年前に書かれたReactのコードのRouterをv4用に修正しようとしてつまづき、色々やってみたのですが、
解決出来ませんでした。アドバイスをいただけたら助かります。
ファイルの構成は下記になります。
jsフォルダ
- componentsフォルダ
- index.js
- layout.js
- detail.js
- config.js
- main.js
- util.js
エラーは下記になります。
- トップページ（index.js）は最初に表示されるが、トップページ（index.js）の各リンクからdetailページに飛べない。
- 下記のようなエラーがconsoleに出ている
DevTools failed to load SourceMap: Could not load content for http://localhost:3000/sockjs.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
bundle.js:82319 Iconv-lite warning: decode()-ing strings is deprecated. Refer to https://github.com/ashtuchkin/iconv-lite/wiki/Use-Buffers-when-decoding
----.jpg:1 GET http://localhost:3000/img/----.jpg 404 (Not Found)
Image (async)
Zg @ js?key=-------
Show 53 more frames
----.jpg:1 GET http://localhost:3000/img/----.jpg 404 (Not Found)
Image (async)
Show 53 more frames
marker.js:44 [Violation] 'setTimeout' handler took 324ms
img/icon_undefined.png:1 GET http://localhost:3000/img/icon_undefined.png 404 (Not Found)
Image (async)
(anonymous) @ util.js:128
Show 55 more frames
js?key=--------------:71 You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started
３年前のvesion3で書かれているもの
v3のmain.js
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRedirect, IndexRoute, browserHistory } from 'react-router'
import CONFIG from './config'
import moment from 'moment'
moment.locale('ja')
import Layout from './components/layout'
import Index from './components/index'
import Detail from './components/detail'
ReactDOM.render(
(<Router history={browserHistory}>
<Route path={CONFIG.appPath} component={Layout}>
<Route path="detail(/:id)" component={Detail}/>
<IndexRoute component={Index}/>
</Route>
<Route path="*" component={Layout}/>
</Router>),
document.getElementById('app'),
)
- Version4に書き換えたもの
v4のmain.js
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
import CONFIG from './config'
import moment from 'moment'
moment.locale('ja')
import Layout from './components/layout'
import Index from './components/index'
import Detail from './components/detail'
ReactDOM.render(
<BrowserRouter>
<div>
<Route path={CONFIG.appPath} component={Layout} />
<div>
<Route path="/mochi(/:id)" component={Mochi}/>
<Route path="/" component={Index}/>
</div>
</div>
</BrowserRouter>,
document.getElementById('app'),
);
0