Vlady Veselinov Vlady Veselinov - 1 month ago 20
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

Try using replace instead of push

  • push - Pushes a new location to history, becoming the current location
  • replace - Replaces the current location in history.

react-router-redux

import { push } from 'react-router-redux';

export default function redirect404() {
  return (dispatch) => {
    dispatch(replace('/404'));
  };
}
Comments