Vlady Veselinov Vlady Veselinov - 8 months ago 66
React JSX Question

How to redirect to 404 if no data from external API (universal React + Redux app)?

I have a route with params and I want to render/redirect to a 404 route if an action returns no data from an external API. What would be the most sensible way to do this?

This is the router:

export default (
<Route path="/" component={App}>
<Route path=":venueName" component={Venue} />
<Route path="*" component={NotFound} />

The Venue component is connected to Redux and fires a action:

// ...
componentWillMount() {
// want to redirect to 404 if this returns success === false
// ...

Action looks like this:

export const fetchVenue = (id) => ({
type: 'FETCH_VENUE',
payload: axios.get('http://someAddress/api/venues/id'),

The problem I have here is how do I figure out to do this with server-side rendering and for any amount of routes. I'm using "match" from react-router in express to render the markup. Please me know if you want me to post more code.


The component isn't the right place for this kind of logic, IMHO. I do this in my action, and use react-router's `browserHistory. So something like:

export function fetchBrand(id) {
  return function(dispatch) {
    fetchData(`brands/${id}`, {
      headers: { 'X-Token-Auth': localStorage.getItem('token')}
    }).then(response => {
        type: FETCH_BRAND_SUCCESS,
        payload: response
    }).catch(err => {
       if (err.response.status == 404) {

And I'd have some sort of route to my404page, for example.