Created
March 14, 2017 11:00
-
-
Save j138/c536c33d2d06f239e1ef049f5460a1b5 to your computer and use it in GitHub Desktop.
react-router@v4対応
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment