Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
34
Help us understand the problem. What is going on with this article?
@Jey

react-router@v4対応したので雑に晒す

More than 3 years have passed since last update.

react-router@v4対応しんどかったから備忘録残す。
既存をバージョンアップするだけだと絶対死ぬ。危険。

変更点

破壊的な変更が入った。今までの手法は腐った。
マニュアル見ながら書かないとハマる。見てもハマる。

  • パッケージ名がreact-routerからreact-router-domになった
  • URL起因のパラメータ周りの呼び方変更 this.props.params -> this.props.match.params
  • Route定義がしれっと無名関数になってる
  • browserhistoryの取り扱い

material-uiと連携する時、<Route.component>に、
Templateとして<MuiThemeProvider>を渡してたけど、
props.childrenで渡すなって警告が出たから諦めて別実装にした。

アップデート方法

npm un -S react-router && npm i -S react-router-dom

差分

v3からv4への修正点まとめたので晒す

diff --git a/package.json b/package.json
index 249974e..25f88b1 100644
--- a/package.json
+++ b/package.json
@@ -97,8 +97,7 @@
     "react-ga": "2.1.2",
     "react-helmet": "^4.0.0",
     "react-konva": "1.1.1",
-    "react-router": "3.0.2",
+    "react-router-dom": "4.0.0",
     "react-tap-event-plugin": "2.0.1",
     "react-window-resize-listener": "1.1.0"
   }
diff --git a/src/components/Config/routes.jsx b/src/components/Config/routes.jsx
index 84e32e1..e5cabc1 100644
--- a/src/components/Config/routes.jsx
+++ b/src/components/Config/routes.jsx
@@ -1,19 +1,16 @@
 import React from 'react';
-import { Route, IndexRoute, Redirect } from 'react-router';
+import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

-import Template from '../Templates/Template';
 import Content from '../Templates/Content';

-const routes = (
-  <Route path="/" component={Template}>
-    <IndexRoute component={Content} />
-
-    <Route path="/uid" component={Content}>
-      <Route path=":uid" />
-    </Route>
-
-    <Redirect from="*" to="/" />
-  </Route>
+const routes = () => (
+  <Router>
+    <Switch>
+      <Route exact path="/" component={Content} />
+      <Route exact path="/uid/:uid" component={Content} />
+      <Redirect from="*" to="/" />
+    </Switch>
+  </Router>
 );

 export default routes;
diff --git a/src/components/Templates/Content/index.jsx b/src/components/Templates/Content/index.jsx
index d614360..6ae9a0b 100644
--- a/src/components/Templates/Content/index.jsx
+++ b/src/components/Templates/Content/index.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import { browserHistory } from 'react-router';
 import Config from '../../Config/index';
 import Sidebar from '../../Sidebar';
 import Header from '../../Header';
@@ -11,8 +10,7 @@ import '../../Utils/common.css';
 class Content extends React.Component {
   constructor(props) {
     super(props);
-
-    const { params } = this.props;
+    const params = this.props.match.params;

     this.state = {
       uid: params.uid || '',
@@ -24,11 +22,12 @@ class Content extends React.Component {
     this.setState({ uid: v });

     const url = (v === '') ? '/' : `/uid/${v}`;
-    browserHistory.push(url);
+    this.props.history.push(url);
   }

   render() {
-    const { params } = this.props;
+    const params = this.props.match.params;
+    const { uid } = this.state;

     return (
       <div id="outer-container">
@@ -42,14 +41,20 @@ class Content extends React.Component {
 Content.propTypes = {
-  params: React.PropTypes.shape().isRequired,
+  history: React.PropTypes.shape().isRequired,
+  match: React.PropTypes.shape({
+    params: React.PropTypes.shape().isRequired,
+  }).isRequired,
 };

 export default Content;
diff --git a/src/index.jsx b/src/index.jsx
index a4c5050..2b48e9e 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,21 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import injectTapEventPlugin from 'react-tap-event-plugin';
-import { Router, browserHistory } from 'react-router';
-import routes from './components/Config/routes';
+import Routes from './components/Config/routes';
 import './main.css';
-
-const history = browserHistory;
-
-history.listen((location) => {
-  setTimeout(() => {
-    if (location.action === 'POP') return;
-    window.scrollTo(0, 0);
-  });
-});
+import Template from './components/Templates/Template';

 window.React = React;
 injectTapEventPlugin();
-ReactDOM.render((
-  <Router history={history} routes={routes} />
-), document.getElementById('root'));
+ReactDOM.render(
+  <Template>
+    <Routes />
+  </Template>
+  , document.getElementById('root'));

34
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Jey
健全な筋肉は健全なコードを生む。 筋肉で殴ればコードは治る。
ca-adv
サイバーエージェントグループの一員としてコミュニティサービス、ゲーム、スマートフォン向けサービス、インターネット広告など最先端のインターネットサービスに関わる事業

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
34
Help us understand the problem. What is going on with this article?