onClick navigation in react-router-4 - reactjs

Question

I can not understand what I did incorrect.
Please help.
I need navigate by click to another route in react-route 4.
I saw the similar question here: How to get history on react-router v4?
and made all as in right answer wrote, but React does not render my component.
Bellow is my code:
import history from './history';
const store = createStore(reducer, composeWithDevTools(applyMiddleware()));
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
document.getElementById('root'));
// history.js
import { createBrowserHistory } from 'history'
export default createBrowserHistory({
/* pass a configuration object here if needed */
});
import history from './history';
/**
* onClick function for navigation
*/
onNavigateTask = (id) => {
return () => {
history.push(`/tasks/${id}`);
};
}
the path is correct after click but component is not rendered
//route for component
<Route
path='/task:id'
render={() => {
return (
<CurrentTask
results={results}
/>);
}}
/>
EDITED:
/* eslint-disable no-undef */
import React from 'react';
import PropTypes from 'prop-types';
import { Switch, Route } from 'react-router';
import TimeTracker from './TimeTracker';
import CurrentTask from './CurrentTask';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { connect } from 'react-redux';
import { initStorage, setStoreItem } from './helpers/localStorage';
import { updateStartTime, updateCurrentTask, updatePickedDay, updateResults } from './actions/TimeTracker';
class App extends React.Component {
constructor () {
super();
initStorage('timeData');
}
render () {
const {
startTime,
currentTask,
firstPickedDay,
secondPickedDay,
results,
onSetStartTime,
onSetCurrentTask,
onSetPickedDay,
onSetResults} = this.props;
return (
<MuiThemeProvider>
<Switch>
<Route
exact path='/'
render={() => {
return (
<TimeTracker
results={results}
startTime={startTime}
currentTask={currentTask}
firstPickedDay={firstPickedDay}
secondPickedDay={secondPickedDay}
onSetStartTime={onSetStartTime}
onSetCurrentTask={onSetCurrentTask}
onSetPickedDay={onSetPickedDay}
onSetResults={onSetResults}
setStoreItem={setStoreItem} />
);
}}
/>
<Route
path='/task:id'
render={() => {
return (
<CurrentTask
results={results}
/>);
}}
/>
</Switch>
</MuiThemeProvider>
);
}
}
export default connect(
state => ({
startTime: state.startTime,
currentTask: state.currentTask,
firstPickedDay: state.firstPickedDay,
secondPickedDay: state.secondPickedDay,
results: state.results
}),
dispatch => ({
onSetStartTime: updateStartTime(dispatch),
onSetCurrentTask: updateCurrentTask(dispatch),
onSetPickedDay: updatePickedDay(dispatch),
onSetResults: updateResults(dispatch)
})
)(App);
App.propTypes = {
startTime: PropTypes.number.isRequired,
currentTask: PropTypes.string.isRequired,
firstPickedDay: PropTypes.number.isRequired,
secondPickedDay: PropTypes.number.isRequired,
results: PropTypes.array.isRequired,
onSetStartTime: PropTypes.func.isRequired,
onSetCurrentTask: PropTypes.func.isRequired,
onSetPickedDay: PropTypes.func.isRequired,
onSetResults: PropTypes.func.isRequired
};

Answer 1

The problem is that the component means that the Router will match the first route and stop. Try changing the order of your routers, so your more specific ones are on top.