Реагируйте, страница не появляется

Question

Я пытаюсь вывести статью на новой странице, но статья на новой странице не отображается в консоли, ее там нет, она пустая, как я могу это исправить.

backend - Ruby on Rails интерфейс - React / Redux

Страница, на которой отображается статья.

task_details.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Exit from '../authentication/exit';
import { browserHistory } from 'react-router'; 
import { getTask } from '../../actions/tasks';
import TasksList from './tasks_list';

import Link from 'react-router'

class TaskDetails extends Component {
componentDidMount () {
let id = this.props.params.id;
this.props.onGetTask(id);
};

render() {
const { task } = this.props
console.log(this.props.location.pathname, "xxxxxxxx")
return (
  <div>
    {  this.props.task ? 
      <div className="container">
        <h2 className="text-center">{task.title}</h2>
        <div className="col-md-2">
          <h4 className="pull-right"><i>{task.due_date}</i></h4>
        </div>
        <div className="clearfix"></div>
        <div className="description">
          <p>{task.description}</p>
        </div>
      </div>
    :
    <div className="container">
      <div><h2>Not found</h2></div>
    </div>  
    }
  </div>
 );
}
};

export default connect(
state => ({
task: state.tasks.item
}),

dispatch => ({
onGetTask: (id) => {
  dispatch(getTask(id));
},
})

)(TaskDetails);

Страница, ответственная за задание.

tasks.js

import axios from 'axios';
import cookie from 'react-cookies';
//const API_URL = `https://evening-taiga-79121.herokuapp.com/todos`;
const API_URL = `http://localhost:3000/todos`;

let headers = { 'Content-Type': 'application/json', };
const token = cookie.load('token');

export function fetchTasks(user_id){
return function(dispatch, getState) {
let body = JSON.stringify({ token: token });
headers['Authorization'] = `Bearer ${token}`;

axios.get(`${API_URL}`, { headers, body })
  .then(res => {
    if (res.status === 200) {
      dispatch({ type: 'GET_TASKS', payload: res.data });
    }
  })
  .catch(e => {
    console.error("error: ", e);
  })
}
}

export function getTask(id) {
return function(dispatch, getState) {
return new Promise((resolve, reject) => {
  axios.get(`${API_URL}/${id}`, { headers: headers })
  .then(res => {
    resolve(res)
    dispatch({ type: 'GET_TASK_ID', payload: res.data });
  })
  .catch(e => {
    console.error("error: ", e);
    reject(e)
  })
})
}
}

export function deleteTask(id){
return function(dispatch, getState) {
let body = { token: token };
axios.delete(`${API_URL}/${id}`, { params: body, headers: headers })
  .then(res => {
    dispatch({ type: 'DELETE_TASK', payload: id });
  })
  .catch(id => {
    console.error("error", id);
  })
}
}

export function addTask(task){
return function(dispatch, getState) {
let body = JSON.stringify({todo: task, token: token});
console.log(body);
axios.post(API_URL, body, { headers: headers })
  .then(res => {
    dispatch({ type: 'ADD_TASK', payload: res.data });
  })
  .catch(e => {
    console.error(e);
  })
}
}

export function completedTask(id, complete){
return function(dispatch, getState) {
if (complete === true) {
  complete = false
} else {
  complete = true
}
let task = {id: id, completed: complete};
let body = {todo: task, token: token};

axios.patch(`${API_URL}/${task.id}`, body, { headers: headers })
  .then(res => {
    dispatch({ type: 'COMPLITED_TASK', payload: res.data });
  })
  .catch(e => {
    console.error("error: ", e);
  })
}
}

export function sortTasks(sortBy){
return function(dispatch, getState) {
let body = JSON.stringify({ token: token, sortByTitle: sortBy.title, sortByAsc: sortBy.asc });
axios.post(`${API_URL}/sort`, body, { headers: headers })
  .then(res => {
    console.log(res);
    if (res.status === 200) {
      dispatch({ type: 'SORT_BY', payload: sortBy });
      dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: res.data });
    }
  })
  .catch(e => {
    console.error("error: ", e);
  })
}
}

export function editTask(task){
return function(dispatch, getState) {
let body = JSON.stringify({todo: task, token: token});
axios.patch(`${API_URL}/${task.id}`, body, { headers: headers })
  .then(res => {
    dispatch({ type: 'EDIT_TASK', payload: res.data });
  })
  .catch(e => {
    console.error("error: ", e);
  })
}
}

Страница, с которой мы переходим на страницу со статьей.

tasks_index.js

import React, {Component} from 'react';
import { Router, Route, hashHistory } from 'react-router';
import Exit from '../authentication/exit';
import TasksList from './tasks_list';
import New from './new';
import Edit from './edit';
import {connect} from 'react-redux';
import { Link } from 'react-router';
import {fetchTasks, sortTasks} from '../../actions/tasks';

const Tasks_Index = ({user_id, onFetchTasks}) => {

if (user_id) {
onFetchTasks(user_id)
return (
  <div>
    <div className="container">
      <div className="row">
          <div className="navbar-header col-md-2">
              <a href="#">
                  <h2 className="pull-right">TASKS</h2>
              </a>
          </div>
        <ul>
          <div className="pull-right nav navbar-nav">
            <h4><li className=""><Link to="/user/exit">Log out</Link></li></h4>
          </div> 
        </ul> 
      </div>
    </div>
    <div className="container">
      <div className="row">
        <New />
        <Edit />
        <TasksList />
      </div>
    </div>
  </div>
);
} else
return null;
}
export default connect(
state => ({
user_id: state.user.id,
editId: state.tasks.edit,
sortBy: state.tasks.sortBy
}),
dispatch => ({
onFetchTasks: (user_id) => {
  dispatch(fetchTasks(user_id));
}
})
)(Tasks_Index);

Спасибо за помощь.