reactjs - onClick navigation in react-router-4 -

i can not understand did incorrect. please help.

i need navigate click route in react-route 4.

i saw similar question here: how history on react-router v4?

and made in right answer wrote, react not render component.

bellow code:

import history './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 } 'history'    export default createbrowserhistory({    /* pass configuration object here if needed */  });

  import history './history';        /**     * onclick function navigation     */    onnavigatetask = (id) => {      return () => {        history.push(`/tasks/${id}`);      };    }

the path correct after click component not rendered

//route component    <route              path='/task:id'              render={() => {                return (                  <currenttask                    results={results}                  />);              }}            />

edited:

/* eslint-disable no-undef */  import react 'react';  import proptypes 'prop-types';  import { switch, route } 'react-router';  import timetracker './timetracker';  import currenttask './currenttask';  import muithemeprovider 'material-ui/styles/muithemeprovider';  import { connect } 'react-redux';  import { initstorage, setstoreitem } './helpers/localstorage';  import { updatestarttime, updatecurrenttask, updatepickedday, updateresults } './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  };

the problem component means router match first route , stop. try changing order of routers, more specific ones on top.