Repo: https://github.com/leongaban/remix-tutorial

I’m using a brand new build of Remix.

My vite.config.ts:

import { vitePlugin as remix } from '@remix-run/dev';
import { installGlobals } from '@remix-run/node';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

installGlobals();

export default defineConfig({
  plugins: [
    remix({
      ignoredRouteFiles: ['**/.*'], // <-- default without this did not work too
    }),
    tsconfigPaths(),
  ],
});

Settings component:

import { Link, Outlet } from '@remix-run/react';

export default function Settings() {
  return (
    <div>
      <h1>Settings</h1>
      <p>This is the Settings page</p>
      <nav>
        <Link to="app">App</Link>
        <br />
        <Link to="profile">Profile</Link>
        <Outlet />
      </nav>
    </div>
  );
}

settings/app component:

import { Link } from '@remix-run/react';

export default function App() {
  return (
    <div>
      <h1>App Settings</h1>
      <p>...</p>
    </div>
  );
}

Folder structure:

The Bug

I navigated to /settings and click on the App Link

I get a 404 Not Found Error and the following error in the Chrome console:

“Error: No route matches URL “/settings/app””