How to force 404?

[mparker11]

Inside the routes files, I thought I could do redirectTo: { name: 'NotFound' } but I get this error:

TypeError: Expected "0" to be a string

How do we force redirect to the 404 page if conditions aren't met for a specific route?

[pshrmn]

When a response has a redirectTo property, it will attempt to generate a pathname from the matching route. Given a NotFound route like this:

{
  name: "NotFound",
  path: "(.*)",
  // ...
}

there is no actual path to generate, just a catch all pattern (does this make sense? it is a bit hard to put into words).

If you want to change locations when there is no match (invalid params), you could give the catch all pattern a param name.

{
  name: "NotFound",
  path: ":path(.*)",
  // ...
}

{
  redirectTo: {
    name: "NotFound",
    params: { path: "404" }
  }
}
// change url to /404

That said, I generally wouldn't recommend redirecting 404s. I would prefer to have that route render its own 404 message for invalid params. Redirecting causes the user to lose context about what location causes the error. For example, if I mistype a URL and get redirected, I have to re-type the whole thing instead of fixing my typo.

[mparker11]

This makes perfect sense.

I would prefer to have that route render its own 404 message for invalid params.

In terms of this, are you suggesting using the error prop for the response to send a message to page, then rendering my own component for a "404"?

[pshrmn]

Yeah, I think that there are a number of approaches that you could take.

If you want to have a generic error message for every route that matches but params are invalid, you could return a 404 component for the body.

response() {
  if (exists) {
    return { body: RouteComponent, ... };
  } else {
    return { body: NotFound };
  }

For a route specific 404, I think that setting an error message would make sense (and if you have SSR, you could set the status too) or you could have a route specific error component.

response() {
  const error = exists ? null : "Thing not found";
  return {
    body: RouteComponent,
    error
  };
}

And then there is Suspense, which will encourage "distributed" data fetches (whereas using route.resolve may be considered "hoisted"). You might not know if the params are valid until you are rendering and the cache "misses", so you would have to render a not found message from within the component.

Suspense will be interesting (Curi should be ready to support it the day that it releases) because it removes the need for route.resolve (although I believe that will still be useful).