GithubHelp home page GithubHelp logo

How to force 404? about curi HOT 3 CLOSED

pshrmn avatar pshrmn commented on May 14, 2024
How to force 404?

from curi.

Comments (3)

pshrmn avatar pshrmn commented on May 14, 2024

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.

from curi.

mparker11 avatar mparker11 commented on May 14, 2024

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"?

from curi.

pshrmn avatar pshrmn commented on May 14, 2024

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).

from curi.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.