Skip to content

Commit 7b93027

Browse files
author
Ji, Dennis
committed
Update the react-router to v4 smoothly
Update the react-router to v4 - use react-router-redux to connect react-router and redux - change path patterns to match the urls - change Link to string to start with "/" - change props.params to props.match.params - change redirect logic to using 'push' in 'react-router-redux' - add routerReducer to reducers
1 parent 4a72227 commit 7b93027

18 files changed

+107
-87
lines changed

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@
77
"react-scripts": "0.9.5"
88
},
99
"dependencies": {
10-
"history": "^4.3.0",
10+
"history": "^4.6.3",
1111
"marked": "^0.3.6",
1212
"prop-types": "^15.5.10",
1313
"react": "^15.5.0",
1414
"react-dom": "^15.5.0",
1515
"react-redux": "^4.4.8",
16-
"react-router": "^3.0.4",
16+
"react-router": "^4.1.2",
17+
"react-router-dom": "^4.1.2",
18+
"react-router-redux": "^5.0.0-alpha.6",
1719
"redux": "^3.6.0",
1820
"redux-devtools-extension": "^2.13.2",
1921
"redux-logger": "^3.0.1",

‎src/components/App.js‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
import agent from '../agent';
22
import Header from './Header';
33
import React from 'react';
4-
import PropTypes from 'prop-types';
54
import { connect } from 'react-redux';
65
import { APP_LOAD, REDIRECT } from '../constants/actionTypes';
6+
import { Route, Switch } from 'react-router-dom';
7+
import Article from '../components/Article';
8+
import Editor from '../components/Editor';
9+
import Home from '../components/Home';
10+
import Login from '../components/Login';
11+
import Profile from '../components/Profile';
12+
import ProfileFavorites from '../components/ProfileFavorites';
13+
import Register from '../components/Register';
14+
import Settings from '../components/Settings';
15+
import { store } from '../store';
16+
import { push } from 'react-router-redux';
717

8-
const mapStateToProps = state => ({
9-
appLoaded: state.common.appLoaded,
10-
appName: state.common.appName,
11-
currentUser: state.common.currentUser,
12-
redirectTo: state.common.redirectTo
13-
});
18+
const mapStateToProps = state => {
19+
return {
20+
appLoaded: state.common.appLoaded,
21+
appName: state.common.appName,
22+
currentUser: state.common.currentUser,
23+
redirectTo: state.common.redirectTo
24+
}};
1425

1526
const mapDispatchToProps = dispatch => ({
1627
onLoad: (payload, token) =>
@@ -22,7 +33,8 @@ const mapDispatchToProps = dispatch => ({
2233
class App extends React.Component {
2334
componentWillReceiveProps(nextProps) {
2435
if (nextProps.redirectTo) {
25-
this.context.router.replace(nextProps.redirectTo);
36+
// this.context.router.replace(nextProps.redirectTo);
37+
store.dispatch(push(nextProps.redirectTo));
2638
this.props.onRedirect();
2739
}
2840
}
@@ -43,7 +55,17 @@ class App extends React.Component {
4355
<Header
4456
appName={this.props.appName}
4557
currentUser={this.props.currentUser} />
46-
{this.props.children}
58+
<Switch>
59+
<Route exact path="/" component={Home}/>
60+
<Route path="/login" component={Login} />
61+
<Route path="/register" component={Register} />
62+
<Route path="/editor/:slug" component={Editor} />
63+
<Route path="/editor" component={Editor} />
64+
<Route path="/article/:id" component={Article} />
65+
<Route path="/settings" component={Settings} />
66+
<Route path="/@:username/favorites" component={ProfileFavorites} />
67+
<Route path="/@:username" component={Profile} />
68+
</Switch>
4769
</div>
4870
);
4971
}
@@ -57,8 +79,8 @@ class App extends React.Component {
5779
}
5880
}
5981

60-
App.contextTypes = {
61-
router: PropTypes.object.isRequired
62-
};
82+
// App.contextTypes = {
83+
// router: PropTypes.object.isRequired
84+
// };
6385

6486
export default connect(mapStateToProps, mapDispatchToProps)(App);

‎src/components/Article/ArticleActions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link } from 'react-router';
1+
import { Link } from 'react-router-dom';
22
import React from 'react';
33
import agent from '../../agent';
44
import { connect } from 'react-redux';

‎src/components/Article/ArticleMeta.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import ArticleActions from './ArticleActions';
2-
import { Link } from 'react-router';
2+
import { Link } from 'react-router-dom';
33
import React from 'react';
44

55
const ArticleMeta = props => {
66
const article = props.article;
77
return (
88
<div className="article-meta">
9-
<Link to={`@${article.author.username}`}>
9+
<Link to={`/@${article.author.username}`}>
1010
<img src={article.author.image} alt={article.author.username} />
1111
</Link>
1212

1313
<div className="info">
14-
<Link to={`@${article.author.username}`} className="author">
14+
<Link to={`/@${article.author.username}`} className="author">
1515
{article.author.username}
1616
</Link>
1717
<span className="date">

‎src/components/Article/Comment.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import DeleteButton from './DeleteButton';
2-
import { Link } from 'react-router';
2+
import { Link } from 'react-router-dom';
33
import React from 'react';
44

55
const Comment = props => {
@@ -13,13 +13,13 @@ const Comment = props => {
1313
</div>
1414
<div className="card-footer">
1515
<Link
16-
to={`@${comment.author.username}`}
16+
to={`/@${comment.author.username}`}
1717
className="comment-author">
1818
<img src={comment.author.image} className="comment-author-img" alt={comment.author.username} />
1919
</Link>
2020
&nbsp;
2121
<Link
22-
to={`@${comment.author.username}`}
22+
to={`/@${comment.author.username}`}
2323
className="comment-author">
2424
{comment.author.username}
2525
</Link>

‎src/components/Article/CommentContainer.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import CommentInput from './CommentInput';
22
import CommentList from './CommentList';
3-
import { Link } from 'react-router';
3+
import { Link } from 'react-router-dom';
44
import React from 'react';
55

66
const CommentContainer = props => {
@@ -22,9 +22,9 @@ const CommentContainer = props => {
2222
return (
2323
<div className="col-xs-12 col-md-8 offset-md-2">
2424
<p>
25-
<Link to="login">Sign in</Link>
25+
<Link to="/login">Sign in</Link>
2626
&nbsp;or&nbsp;
27-
<Link to="register">sign up</Link>
27+
<Link to="/register">sign up</Link>
2828
&nbsp;to add comments on this article.
2929
</p>
3030

‎src/components/Article/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ const mapDispatchToProps = dispatch => ({
2121
class Article extends React.Component {
2222
componentWillMount() {
2323
this.props.onLoad(Promise.all([
24-
agent.Articles.get(this.props.params.id),
25-
agent.Comments.forArticle(this.props.params.id)
24+
agent.Articles.get(this.props.match.params.id),
25+
agent.Comments.forArticle(this.props.match.params.id)
2626
]));
2727
}
2828

@@ -85,7 +85,7 @@ class Article extends React.Component {
8585
<CommentContainer
8686
comments={this.props.comments || []}
8787
errors={this.props.commentErrors}
88-
slug={this.props.params.id}
88+
slug={this.props.match.params.id}
8989
currentUser={this.props.currentUser} />
9090
</div>
9191
</div>

‎src/components/ArticlePreview.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Link } from 'react-router';
2+
import { Link } from 'react-router-dom';
33
import agent from '../agent';
44
import { connect } from 'react-redux';
55
import { ARTICLE_FAVORITED, ARTICLE_UNFAVORITED } from '../constants/actionTypes';
@@ -36,12 +36,12 @@ const ArticlePreview = props => {
3636
return (
3737
<div className="article-preview">
3838
<div className="article-meta">
39-
<Link to={`@${article.author.username}`}>
39+
<Link to={`/@${article.author.username}`}>
4040
<img src={article.author.image} alt={article.author.username} />
4141
</Link>
4242

4343
<div className="info">
44-
<Link className="author" to={`@${article.author.username}`}>
44+
<Link className="author" to={`/@${article.author.username}`}>
4545
{article.author.username}
4646
</Link>
4747
<span className="date">
@@ -56,7 +56,7 @@ const ArticlePreview = props => {
5656
</div>
5757
</div>
5858

59-
<Link to={`article/${article.slug}`} className="preview-link">
59+
<Link to={`/article/${article.slug}`} className="preview-link">
6060
<h1>{article.title}</h1>
6161
<p>{article.description}</p>
6262
<span>Read more...</span>

‎src/components/Editor.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,18 +71,18 @@ class Editor extends React.Component {
7171
}
7272

7373
componentWillReceiveProps(nextProps) {
74-
if (this.props.params.slug !== nextProps.params.slug) {
75-
if (nextProps.params.slug) {
74+
if (this.props.match.params.slug !== nextProps.match.params.slug) {
75+
if (nextProps.match.params.slug) {
7676
this.props.onUnload();
77-
return this.props.onLoad(agent.Articles.get(this.props.params.slug));
77+
return this.props.onLoad(agent.Articles.get(this.props.match.params.slug));
7878
}
7979
this.props.onLoad(null);
8080
}
8181
}
8282

8383
componentWillMount() {
84-
if (this.props.params.slug) {
85-
return this.props.onLoad(agent.Articles.get(this.props.params.slug));
84+
if (this.props.match.params.slug) {
85+
return this.props.onLoad(agent.Articles.get(this.props.match.params.slug));
8686
}
8787
this.props.onLoad(null);
8888
}

‎src/components/Header.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Link } from 'react-router';
2+
import { Link } from 'react-router-dom';
33

44
const LoggedOutView = props => {
55
if (!props.currentUser) {
@@ -13,13 +13,13 @@ const LoggedOutView = props => {
1313
</li>
1414

1515
<li className="nav-item">
16-
<Link to="login" className="nav-link">
16+
<Link to="/login" className="nav-link">
1717
Sign in
1818
</Link>
1919
</li>
2020

2121
<li className="nav-item">
22-
<Link to="register" className="nav-link">
22+
<Link to="/register" className="nav-link">
2323
Sign up
2424
</Link>
2525
</li>
@@ -42,20 +42,20 @@ const LoggedInView = props => {
4242
</li>
4343

4444
<li className="nav-item">
45-
<Link to="editor" className="nav-link">
45+
<Link to="/editor" className="nav-link">
4646
<i className="ion-compose"></i>&nbsp;New Post
4747
</Link>
4848
</li>
4949

5050
<li className="nav-item">
51-
<Link to="settings" className="nav-link">
51+
<Link to="/settings" className="nav-link">
5252
<i className="ion-gear-a"></i>&nbsp;Settings
5353
</Link>
5454
</li>
5555

5656
<li className="nav-item">
5757
<Link
58-
to={`@${props.currentUser.username}`}
58+
to={`/@${props.currentUser.username}`}
5959
className="nav-link">
6060
<img src={props.currentUser.image} className="user-pic" alt={props.currentUser.username} />
6161
{props.currentUser.username}

0 commit comments

Comments
 (0)