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