React JSX Question
Redirecting to 404 component without changing URL in the browser?
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>
);
Calling this redux action to redirect:
import { push } from 'react-router-redux';
export default function redirect404() {
return (dispatch) => {
dispatch(push('/404'));
};
}
What I have right now works but I can see some user-experience frustration coming out of it.
EDIT: I think the issue is arising from the routes with params, such as:
<Route path="venues/:venueName" component={VenueContainer} />React-router sees a match and doesn't redirect to:
<Route path="*" component={NotFound} />I'm requesting data from an external API and if there is none I want to show the 404 without changing the URL:
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());
});
};
}
Answer Source
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'));
};
}