Skip to content

Weird route #567

Description

@tuandung734

Describe the bug

Hello! Please see the code below:

// src/routes/index.tsx
import { type RouteDefinition } from "@solidjs/router";
import { lazy } from "solid-js";

const
    WHLayout = lazy( () => import( "../features/warehouse-manager/layout" ) ),
    WHDashboard = lazy( () => import( "../features/warehouse-manager/page" ) );

export const routes: RouteDefinition[] = [
    {
        path: "/",
        component: () => <div>Home page</div>,
    },
    {
        path: "/warehouse-manager",
        component: WHLayout,
        children: [
            {
                path: "/",
                component: WHDashboard,
            },
        ],
    },
];

// src/routes/not-found.tsx
const NotFound = () => {
    return (
        <section class="flex flex-col gap-2 items-center justify-center min-h-dvh text-rose-500 w-full">
            <h1 class="text-3xl">404</h1>
            <p class="font-niramit text-xl uppercase">Page not found</p>
        </section>
    );
}

export default NotFound;

Previously (about 2-3 years ago, in my other Github account), I reported a bug (#457) where a path had extra forward slashes that were still valid, e.g. http://localhost:3000//dash

This situation still exists now. Is this a bug, or is this a feature?

Your Example Website or App

.

Steps to Reproduce the Bug or Issue

.

Expected behavior

I hope there is a solution to thoroughly handle this problem, similar to the temporary method I am applying:

// src/App.tsx
import { lazy, createMemo, Show } from "solid-js";
import { Router, type RouteSectionProps } from "@solidjs/router";

import { routes } from "./routes";

const NotFound = lazy( () => import( "./routes/not-found" ) );

export default function App() {
	return (
		<Router root={ ( props: RouteSectionProps ) => {
			// Check for dirty URLs as soon as the app launches
			const isUrlMalicious = createMemo( () => {
				return window.location.pathname.includes( "//" );
			} );

			return (
				<Show 
					when={ !isUrlMalicious() }
					fallback={ <NotFound /> } // If the URL is dirty: Block it, show 404
				>
					{/* If the URL is clean: Returns props.children to display the correct page the user needs to go to */}
					{ props.children }
				</Show>
			);
		} }>
			{ routes }
		</Router>
	);
}

Screenshots or Videos

No response

Platform

  • OS: macOS
  • Browser: Firefox

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions