Почему не рендерятся вложенные Route?

Question

[Xaip]

Есть три четыре простецких компонента
App:

.....................................
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 в котором находится роут на компонент Detail, который не рендерится:

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(в котором находится Линк на компонент Detail):

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>
    }
}

И сам Detail который не рендерится:

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

А если обновить страницу по роуту /tasks/6 то компонент рендерится но только один раз, потом по линкам он не переключается

Answer 1

[davidnum95]

withRouter

Comments

[Xaip]

Нет, не помогает