Why are nested Routes not rendering?

Question

JavaScript

There are three four simple
App components:

.....................................
class App extends React.Component {

    componentWillMount() {
        this.props.AppActions.checkSession();
    }

    render() {
        const { user } = this.props;
        return <Router>
            <main>
                <Top/>
                <Route exact path="/" render={() => (user.is_auth ? <State/> : <Redirect to={'/login'} />)} />
                <Route path="/login" component={Authentication} />
                <Route path="/logging/:process" render={props => (user.is_auth ? <Logging {...props} key={props.location.key}/> : <Redirect to={'/login'} />)} />
                <Route path='/tasks' render={props => (user.is_auth ? <Tasks/> : <Redirect to={'/login'} />)}/>
            </main>
        </Router>
    }
}
...................................

Tasks which has a route to the Detail component that is not rendered:

class Tasks extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentWillMount() {
        this.props.TasksActions.getTasks();
    }


    render() {
        const {tasks} = this.props;
        return <div className="content">
            <div className="tasks">
                {
                    tasks.tasks.map((t, index) => (
                        <Task key={index} t={t}/>
                    ))
                }
                <Route path={'tasks/:taskId'} component={Detail} />
            </div>
        </div>
    }
}

function mapStateToProps(state) {
    return {
        tasks: state.tasks,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        TasksActions: bindActionCreators(TasksActions, dispatch)
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Tasks)

Task (which contains the Link to the Detail component):

export default function Task({t}) {
    if (t) {
        return (
            <div className="task">
                <Link to={'/tasks/'+t.id}>
                <div className="task_info task_date_created">{t.date_created}</div>
                    </Link>
                <div className="task_up">
                    <div className="task_info task_city_name">{t.city_name}</div>
                </div>
                <div className="task_down">
                    <div className="task_info task_path">{t.path}</div>
                </div>
            </div>
        )
    } else {
        return <div></div>
    }
}

And the Detail itself which is not rendered:

export default function Detail({task}) {
    return <div>1</div>
}

And if you update the page using the /tasks/6 route, then the component is rendered but only once, then it does not switch via links

Answer 1

withRouter