Skip to content

Instantly share code, notes, and snippets.

@j138
Last active March 15, 2017 05:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save j138/c02e20d209647faf35be3d4ab75f128f to your computer and use it in GitHub Desktop.
Save j138/c02e20d209647faf35be3d4ab75f128f to your computer and use it in GitHub Desktop.
react-router@v4対応したので雑に晒す ref: http://qiita.com/Jey/items/dae2074427547e63569b
npm un -S react-router && npm i -S react-router-dom
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'));
npm un -S react-router && npm i -S react-router-dom
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/Header/index.jsx b/src/components/Header/index.jsx
index b21c233..cdcd8b3 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import { AppBar } from 'material-ui';
-import { Link } from 'react-router';
+import { BrowserRouter as Router, Link } from 'react-router-dom';
import Config from '../Config/index';
const titleStyle = {
@@ -13,9 +13,9 @@ const linkStyle = {
};
const titleDom = (
- <Link to={{ pathname: '/' }} style={linkStyle}>{Config.title()}</Link>
+ <Router>
+ <Link to={{ pathname: '/' }} style={linkStyle}>{Config.title()}</Link>
+ </Router>
);
const Header = () => (
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'));
<Route path="/" component={Template}>
<Route path="/uid" component={Content}>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment