Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a 404 and 501 page example #4209

Closed
ChrisCinelli opened this issue Nov 21, 2016 · 6 comments
Closed

Add a 404 and 501 page example #4209

ChrisCinelli opened this issue Nov 21, 2016 · 6 comments

Comments

@ChrisCinelli
Copy link

ChrisCinelli commented Nov 21, 2016

Add a 404 and 501 example with best practices.

I saw there are a bunch of issues and PRs that were closed without a solution about 4xx errors. For example I found #3210, #3181, #3098, #3098 (closed because it cannot be merged?).

I am using Router v2.8.1 with isomorphic/universal rendering.
The example https://github.com/wdjungst/react-project/blob/master/create-react-project/blueprint/modules/routes.js covers only the basic use case of hitting a route that does not exist.

  1. I think it is a pretty common use case to have a route with /user/:id that asynchronously load the data that can result with a user that does not exist. In this case you want to send a 404 and render a 404 page. Or maybe you want to have a specific 404 page for that route (user missing).
  2. Another use case is an unhanded error during the async code that should result in a 5xx page.
  3. Finally you may want to do a 301 or 302 redirect driven by async data (ex: the user is blocked, you may redirect to /user/blocked)
@timdorr timdorr modified the milestone: v4.0.0 Nov 21, 2016
@timdorr
Copy link
Member

timdorr commented Nov 21, 2016

This is covered in the server rendering guide: https://github.com/ReactTraining/react-router/blob/master/docs/guides/ServerRendering.md

(Sorry about the label/milestone noise above. Clicked things a little too fast there... 😄 )

@timdorr timdorr closed this as completed Nov 21, 2016
@ChrisCinelli
Copy link
Author

ChrisCinelli commented Nov 21, 2016

Thank you for the quick answer! That helps but I think it does not address:

  1. How programmatically trigger a 404, 302 or 301 (and maybe other 4xx or 5xx errors) in code that asynchronously loads the data.
  2. How we can have a universal logic that works in the browser too.

@timdorr
Copy link
Member

timdorr commented Nov 21, 2016

To do a redirect, you just have to call the provided replace in your route hooks. To do a 404, just don't match any route (remove your * route).

@ChrisCinelli
Copy link
Author

How do you make it work when you have a route like /user/:id that match but after looking in the DB we find that that user does not exist?

@timdorr
Copy link
Member

timdorr commented Nov 21, 2016

One easy way is to do that in an onEnter hook. Just replace to a 404 route. That will trigger a redirect to a page that should give a 404. Not ideal, but generally-speaking your users should be seeing 404s that often anyways :)

@ChrisCinelli
Copy link
Author

ChrisCinelli commented Nov 21, 2016

Can you have a onEnter without having to add it on every Route?

@lock lock bot locked as resolved and limited conversation to collaborators Jan 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants