Ability to define a custom 404 page in the routes declaration

[Gh05d]

Would be pretty neat to be able to set up a route which will be displayed when nothing matches in the routes array. Would be easier than to upload an extra 404.html somewhere (where, by the way). So basically like this:

const routes = [ {
    name: "/404",
    component: NotFound
  }]

[jorgegorka]

@Gh05d You are right and the router should allow both behaviours.

As where to put the 404.html file. It should be in the same directory where you have your index.html

[Gh05d]

As where to put the 404.html file. It should be in the same directory where you have your index.html

Ah, ok. That information helps. Thanks.

[Gh05d]

I made a hack for myself in your finder.js. Don't know whether it is helpful for you:

  function findActiveRoute() {
    let searchActiveRoute = searchActiveRoutes(routes, '', urlParser.pathNames, routerOptions.lang, convert)

    if (!searchActiveRoute || !Object.keys(searchActiveRoute).length || anyEmptyNestedRoutes(searchActiveRoute)) {
      if (typeof window !== 'undefined') {
        const custom404Page = routes.find(route => route.name == "404")
        if(custom404Page){
          return { ...custom404Page, language: defaultLanguage, path: '404' } 
        }
        searchActiveRoute = { name: '404', component: '', path: '404', redirectTo: NotFoundPage }
      }
    } else {
      searchActiveRoute.path = pathWithoutQueryParams(searchActiveRoute)
    }

    return searchActiveRoute
  }

If yes, I could create a pull request.

[jorgegorka]

Hi @Gh05d

I've published a new version 5.6.0 including your suggestion for a custom 404 component. Thank you very much for your help and contribution.

[renegat59]

Thanks a lot for that feature @jorgegorka . However I have some issues with it. I'm trying to look into your code to find out what's happening, but maybe I describe it and you will find it faster. My routes file:

{
    name: "login",
    component: Login,
    layout: PublicLayout,
  },
  {
    name: "/",
    onlyIf: { guard: userLoggedIn, redirect: "/login" },
    layout: AppLayout,
    component: BeerList,
    nestedRoutes: [
      {
        name: "beer",
        nestedRoutes: [
          {
            name: ":id",
            component: BeerDetails,
          },
        ],
      },
    ],
  },
  {
    name: "404",
    path: "404",
    component: Error404,
  },

First of all, I don't really understand what's the "path": "404" doing. It's not really documented anywhere and also removing or changing it is not making any difference. Second, if I enter a wrong url like /beer/asdf/ I get redirected to /beer/404. In my opinion the URL sold not chang, it should just render the 404 component in the component. But of course, maybe it's the matter of preference. On the other hand, if it does the redirect, maybe it should do a redirect to /404 not to /beer/404?

Thanks!

[renegat59]

@jorgegorka I actually found out what was the problem with path and made a PR: https://github.com/jorgegorka/svelte-router/pull/64