component not rendering react-router v4

Question

So the basic app I am creating is trying to request articles from a backend rails api. I have everything correctly set up on the back-end side and the ArticleHome.js returns all the articles as implied in the rails controller that I have.

def index
    render json: Article.all
end

def show
    render json: @article = Article.find(params[:id])
end

For some reason, the SingleArticleShow.js and NewArticle.js do not seem to be rendering their components. I've placed them as children of the App component. When i click the article.title Link in the ArticleHome.js file, the location prop changes its pathname to article/:id but the component does not render for SingleArticleShow.js as implicated in App.js. The browser gives no feedback as to what is wrong.

I have used these as references w/ no success:

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

https://reacttraining.com/react-router/web/guides/redux-integration

dev/js/index.js

import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
import allReducers from './reducers';
import {withRouter, Route, Switch, BrowserRouter} from 'react-router-dom';
import App from './components/App';
import ArticlesHome from './components/ArticlesHome';
import SingleArticleShow from './components/SingleArticleShow';
import NewArticle from './components/NewArticle';

const logger = createLogger();
const store = createStore(
allReducers,
applyMiddleware(thunk, promise, logger)
);

ReactDOM.render(
<Provider store={store}>
        <BrowserRouter history={history}>
            <div>
                <Route path="/" component={App}/>
            </div>
        </BrowserRouter>
</Provider>,
document.getElementById('root')
);

dev/js/components/App.js

import {withRouter, Route, Switch} from 'react-router-dom';
import connect from 'react-redux';
import ArticlesHome from './ArticlesHome';
import NewArticle from './NewArticle';
import SingleArticleShow from './SingleArticleShow';

// require('../../scss/style.scss');

export default class App extends Component{
render(){
    return(
        <div>
        This is our app
            <Switch>
                <Route exact path="articles/new" component={NewArticle} 
/>
                <Route exact path="articles/:id" component=
{SingleArticleShow}/>
                <Route exact path="/" component={ArticlesHome}/>
            </Switch>
        </div>
    ); 
}
}

dev/js/components/ArticlesHome.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {getArticles} from '../actions/index';
import {Link} from 'react-router-dom';

class ArticlesHome extends Component{
componentWillMount(){
    this.props.getArticles();
}

renderArticles(){
    return this.props.articles.map((article) => {
        return (
            <li key={article.id}>
                <Link to={"articles/" + article.id }>
                    <h4>{article.title}</h4>
                </Link>
            </li>
        );
    });
}
render(){
    return(
        <div className="container">

        <div>
        <Link to="articles/new" className="btn btn-warning">
        Create Article
        </Link>
        </div>

        Articles Home Page
        <ul>
            {this.renderArticles()}
        </ul>
        </div>
    );
}
}

function mapStateToProps(state){
return {articles: state.articles.all};
}

export default connect(mapStateToProps, {getArticles})(ArticlesHome);

dev/js/components/SingleArticleShow.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { getArticle } from '../actions/index';
import { withRouter } from 'react-router-dom';

class SingleArticleShow extends Component{

componentWillMount(){
    console.log('Is this going to print?');
    this.props.getArticle(this.props.article.id);
}

render(){
    if (!this.props.article){
        return <div> Getting article, please wait. </div>;
    }
    return(
        <div className="container">

            <h3> Title: {this.props.article.title}</h3>

        </div>
    );
}
}

function mapStateToProps({articles}, ownProps){
return {article: articles[ownProps.match.params.id]};
}

export default withRouter(connect(mapStateToProps, {getArticle})
(SingleArticleShow));

This is the package.json

{
"name": "react-redux-template",
"version": "1.0.0",
"main": "index.js",
"scripts": {
   "dev": "webpack",
   "start": "webpack-dev-server"
},
"license": "ISC",
"dependencies": {
    "axios": "^0.13.1",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.9.0",
    "cross-env": "^1.0.8",
    "css-loader": "^0.23.1",
    "expect": "^1.20.1",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.8.0",
    "react": "^0.14.3",
    "react-addons-test-utils": "^15.1.0",
    "react-dom": "^0.14.3",
    "react-redux": "4.3.0",
    "react-router-dom": "^4.0.0",
    "react-router-redux": "^5.0.0-alpha.8",
    "redux": "^3.5.2",
    "redux-form": "^4.1.3",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  },
  "devDependencies": {
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-stage-0": "^6.5.0",
    "react-transform-hmr": "^1.0.4"
  }
}

import {GET_ARTICLES, GET_ARTICLE, CREATE_ARTICLE} from './types';
import axios from 'axios';

const API_URL = "http://localhost:3000/api/v1";

export function getArticles(){
const request = axios.get(`${API_URL}/articles`);

return{
    type: GET_ARTICLES,
    payload: request
}
}

export function createArticle(props){
const request = axios.post(`${API_URL}/articles`, props);

return{
    type: CREATE_ARTICLE,
    payload: request
};
}

export function getArticle(id){
const request = axios.get(`${API_URL}/articles/${id}`);

return{
    type: GET_ARTICLE,
    payload: request
};
}

If anybody can provide help, I'd be grateful. Thanks.

Answer 1

I would try

"path="/articles/new"

instead of

path="articles/new"