Can't and catch url path containing a '.' in the final sub-path

[KevChaplin]

I am working on a SPA using a Svelte front-end and using the router, nanostores/router package.

In the Routes.svelte file:

{#if !$page.router}
    <Error404 />
{:else if ...

However, if the url final sub-path contains a full-stop '.' e.g. alpha/beta/abc. or alpha/beta/abc.d the 404 page is not displayed. Instead,I get a HTTP 404 error i.e. the router is not intercepting the request.

As a workaround, I tried a regex replace to remove any full-stops if the above pattern is found.

In the same file: window.location.replace(window.location.pathname.replace(/\./g, '')

This works fine on Firefox, however when using Edge or Chrome browser I still get the aforementioned HTTP 404 error.

Is this expected behaviour, or is there a way to deal with '.' in the url?

[ai]

I added a test with . 53d1de8

But I didn’t find any expected behavior.

Can you show your router store file?

[KevChaplin]

import { createRouter } from '@nanostores/router'
import { get } from 'svelte/store'
import { userLocale } from '$lib/stores'
import { computed } from 'nanostores'
import { localeRegex } from '$lib/utils'
import { supportedLocales, defaultLocale } from './i18n'

const urlLocaleRegexStr = `^\/(${localeRegex.source})\/`

const routes = {
	routeA: [new RegExp(`${urlLocaleRegexStr}?$`, 'i'), (locale: string) => ({ locale })],
	routeB: [new RegExp(`${urlLocaleRegexStr}B$`, 'i'), (locale: string) => ({ locale })],
	routeC: [new RegExp(`${urlLocaleRegexStr}C$`, 'i'), (locale: string) => ({ locale })],
	routeD: [new RegExp(`${urlLocaleRegexStr}D$`, 'i'), (locale: string) => ({ locale })],
	routeE: [new RegExp(`${urlLocaleRegexStr}E$`, 'i'), (locale: string) => ({ locale })]
} as const

export const router = createRouter(routes)

const formatLocale = (str: string) => {
	return str.replace(
		/-([a-z]{2})$/,
		(_, match) => '-' + match.toUpperCase()
	) as (typeof supportedLocales)[number]
}

export const routerLocale = computed(router, (router) =>
	router?.params.locale
		? supportedLocales.includes(formatLocale(router.params.locale))
			? formatLocale(router.params.locale)
			: get(userLocale) || defaultLocale
		: get(userLocale) || defaultLocale
)

[ai]

I mean before moving to RegExp (where you had a problem with .)

[KevChaplin]

Maybe I misunderstood, but this regex here is just for formatting the locale, i.e. 'en-gb' to 'en-GB'.

I removed that workaround, just to be sure, issue still present

[ai]

Oh, hard to read this code 😓.

And I need a URL, expected result and real result.

[KevChaplin]

in my AllRoutes.svelte:

{#if !$page.router} <Error404 />

Expected/actual behavioiur:

abc.com/en-GB/A
should go to page A - working
abc.com/en-GB/AB
should go to 404 Page - working
abc.com/en-GB/AB.
should go to 404 Page - not working
abc.com/en-GB/A.B.
should go to 404 Page - not working

[ai]

According to your code all of your URLs should not work.

You have regexps only for /, /en-GB/, /en-GB/B, /en-GB/C, /en-GB/D, and /en-GB/E. There is no RegExp for A, AB, or ..

	routeA: [new RegExp(`${urlLocaleRegexStr}?$`, 'i'), (locale: string) => ({ locale })],
	routeB: [new RegExp(`${urlLocaleRegexStr}B$`, 'i'), (locale: string) => ({ locale })],
	routeC: [new RegExp(`${urlLocaleRegexStr}C$`, 'i'), (locale: string) => ({ locale })],
	routeD: [new RegExp(`${urlLocaleRegexStr}D$`, 'i'), (locale: string) => ({ locale })],
	routeE: [new RegExp(`${urlLocaleRegexStr}E$`, 'i'), (locale: string) => ({ locale })]

[KevChaplin]

my apologies, typo from sanitizing the real routes, other (defined) routes working

• note: other defined routes contain single word, no dot, hyphen, etc.

[ai]

I need some real examples to help you debug the issue. Or do your own research and send PR.

[vineryap]

I think I understand now when the . isn't catch or handled by the router (sorry not sure how to phrase this accurately).
I've made a minimum reproducible code here:
https://stackblitz.com/edit/vitejs-vite-j5m6bi?file=src/App.svelte

So, apparently only when we change the URL directly on the browser address bar then the router will not catch it.
For example, the current URL is example.com/post and then the user edit the URL on the address bar to example.com/post. and press enter, then the network will give a 404 status rather than directing it to the not found page.

Is this the expected behaviour?

[ai]

apparently only when we change the URL directly on the browser address bar then the router will not catch it.

This is how browsers works. There is no router who can catch it, as I understand.

[vineryap]

Understood.
Thank you!