I'm making a universal redux app where the user is redirected to a 404 route if he asks for a non-existing url, but I have this problem where if you click the back button it doesn't let you go back.
Is there a way to redirect to a 404 route without changing the url?
Here's how my routes look like:
export default (
<Route path="/" component={App}>
<IndexRoute component={MainPage} />
<Route path="venues/:venueName" component={VenueContainer} />
<Route path="404" component={NotFound} />
<Route path="*" component={NotFound} />
</Route>
);
import { push } from 'react-router-redux';
export default function redirect404() {
return (dispatch) => {
dispatch(push('/404'));
};
}
<Route path="venues/:venueName" component={VenueContainer} />
<Route path="*" component={NotFound} />
import axios from 'axios';
import redirect404 from './utilActions';
export function fetchVenue() {
return (dispatch) => {
dispatch({
type: 'FETCH_VENUE',
payload: axios.get('http://externalAPI.com'),
})
.catch((error) => {
console.info(error);
dispatch(redirect404());
});
};
}
Try using replace
instead of push
- push - Pushes a new location to history, becoming the current location
- replace - Replaces the current location in history.
import { push } from 'react-router-redux';
export default function redirect404() {
return (dispatch) => {
dispatch(replace('/404'));
};
}