Redirect to NotFoundRoute

[cglantschnig-zz]

I was trying to redirect my "NotFoundRoute", but I figured out that this is not working as you can see in the example below:

http://jsbin.com/pulomegogi/5/edit

The reason I want to do something like this is if I have a an identifier as part of my URL (for instance an title of an blog article) and when I want to get that single item, but it doesn't exists. Then I would get an answer from the server, that this specific item does not exists. So I want to redirect to an NotFoundRoute.

Now my question: Should I use a normal Route for something like that? Or is there already another possibility I could not find here?

[ryanflorence]

I would keep the URL and just render a "not found" view there.

However, I think we should be able to redirect to a NotFoundRoute

[mjackson]

This issue kind of gets to the point of why I think our notion of a "redirect" is a little more like a "rewrite" of the current URL. In a server setting, you probably wouldn't want to incur the overhead of an extra request just to render a 404 page.

[gpbl]

@rpflorence how could we make then the server responding with a 404 status?

I'm in a similar case as @Safari92, where the param refers to an inexistent id. As you suggest, I render a NotFound view:

render: function () {
  var place = findPlace(this.getParams().id);
  if (!place) return <NotFound />;
  // else render the actual component

When a NotFound view is returned, the server should also set a 404 status:

Router.run(routes, req.url, function (Handler, state) {  
  if ("pagenotfound") { // How to get here?
     res.status(404);
  }  
  var handlerElement = React.createElement(Handler);
  res.render('page', { html: React.renderToString(handlerElement); });

});

What could be the correct approach here?

[Nevon]

@gpbl I have the same issue and found this.

[gpbl]

@Nevon I could send a 404 status by using the name of the route in the state:

    Router.run(routes, req.url, (Handler, state) => {
       const html = React.renderToString //.....
       const isNotFound = _.find(state.routes, { 'name': 'not-found' });
       res.status(isNotFound ? 404 : 200).send(html);

not sure if the best way of doing it...

[mweibel]

Doing the same as @gpbl now but I think when the NotFoundRoute is matched, it should be properly indicated within the state param.

[ndreckshage]

In case it helps anyone -- in addition to rendering a not found view for a non-existent record etc, if you pass the context around (node req/res), you can set the response to a 404 status code anywhere

ajax.get(url, null, function(err, res) {
  if (err) {
    reject(err);
  } else {
    if (!!res.notFound && !!context.res) {
      context.res.status(404);
    }
    resolve(res.body);
  }
});

[ryanflorence]

@gpbl I would still render the view the same on the server, but send a 404 status code instead. You can still render the same UI.

[ryanflorence]

I'm not sure the router needs to change at all here, these are all questions for the app to answer.

• You can redirect to a 404 route
• You can render a 404 view in the current route
• You can send a 404 status code and render the current route on the server
• You can redirect to a 404 route on the server

[vsnig]

@ryanflorence how would you handle the option You can send a 404 status code and render the current route on the server? It's similar to what @gpbl asked in #458 (comment)

In other words, how would you pass info from component's render(...) to router.run(...) that the resource hasn't been found and res.status(404); should be sent?

The solution

       const isNotFound = _.find(state.routes, { 'name': 'not-found' });
       res.status(isNotFound ? 404 : 200).send(html);

doesn't work here because all routes matched OK and there is no 'not-found' route in state.routes.

[amrnt]

@Snegostoop you can check if your route is NotFoundRoute by:

var isNotFound = state.routes.some(function(route) {
  return route.isNotFound;
});

[vsnig]

@amrnt this solution doesn't work here. Imagine such a setup:

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="user" path="/user/:user_id" handler={User} />
        <NotFoundRoute name="notfound" handler={NotFound}/>
    </Route>

class User extends React.Component {
    ...
    render() {
        var { router } = this.context;
        var user_id = router.getCurrentParams().user_id;
        var user = fetchUser(user_id);
        if (!user) return <NotFound />
        // else render the actual component

If you'd request http://yourapp.com/user/non_existing_user all routes would match OK, and in state.routes there would be "app" and "user" (there would be no "notfound" route there). So there is no way to distinguish 404 from other "good" requests this way.
Or I am completely missing something.

[amrnt]

@Snegostoop My answer above doesnt answer your question, I meant that is a better way than const isNotFound = _.find(state.routes, { 'name': 'not-found' });.

I'm having the same problem you are facing, I use flux so I have another story... 😭

I suggest to do so: if (!user) return <NotFound /> will render a view and nothing to do with the routes. So I suggest to redirect.

class User extends React.Component {
    ...
    render() {
        var { router } = this.context;
        var user_id = router.getCurrentParams().user_id;
        var user = fetchUser(user_id);
        if (!user) {
          router.transition.redirect('notfound')
          return;
        }
        // else render the actual component

Give it a try and tell me if it works!