404 not found accessing a nested route from localhost

[gevuong]

Hello,

I have fairly straightforward code, easy to replicate, to try and access a nested route, localhost:5174/home/tech.
But I'm getting the following error:

GET http://localhost:5174/home/src/index.tsx net::ERR_ABORTED 404 (Not Found)

This is the following code in App.tsx:

import { Routes, Route, Outlet } from 'react-router-dom';

const Home = (): JSX.Element => {
  return (
    <>
      <h1>Welcome to Home Page</h1>
      <Outlet />
    </>
  );
};

const Tech = () => {
  return <h1>Welcome to Tech Page</h1>;
};

export default function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />}>
        <Route path="tech" element={<Tech />} />
      </Route>
    </Routes>
  );
}

And this is the following code in index.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

createRoot(document.getElementById('root') as HTMLElement).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

In case you're wondering, here are the packages and versions I'm using:

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "typescript": "^5.1.3",
    "vite": "^4.3.9"
  }
}

Interestingly enough, I can access /tech if I change parent path to /, like so: <Route path="/" element={<Home />}>.
But if I have parent path set to /home, like so: <Route path="/home" element={<Home />}>, I cannot access /home/tech.

Also, what I notice is that the GET request is to http://localhost:5174/home/src/index.tsx instead of http://localhost:5174/src/index.tsx when I set the parent path to /home, which throws a 404 Not Found error.

Does this mean that parent/root path must always be /?
Does anyone know why this is happening? Could this be a bug in react-router-dom?

Thank you in advance.

[MUK-Dev]

The parent route should not have a route after v6 of react-router

Your App.tsx file should be something like this

import { Routes, Route, Outlet } from 'react-router-dom';

const Home = (): JSX.Element => {
  return (
    <>
      <h1>Welcome to Home Page</h1>
      <Outlet />
    </>
  );
};

const Tech = () => {
  return <h1>Welcome to Tech Page</h1>;
};

export default function App() {
  return (
    <Routes>
      <Route element={<Home />}>
        <Route path="/home/tech" element={<Tech />} />
      </Route>
    </Routes>
  );
}

Nested routes are used to create layouts.
For example:
You have a dashboard page like this

So here the sidebar and the app bar do not change but only the main body changes. So you would keep the sidebar and app bar in the layout component The Home component in our case and keep the Tech component as a nested route.

[trdp30]

If anyone else facing the same issue and not able to resolve event after the changes provided here @MUK-Dev then you have to make changes in the webpage config file if you are using webpack.

Add the below changes

output: {
  ...
  publicPath: '/'
}