Route nesting is not working as per docs

[nivethan-me]

I'm following the docs on Route nesting and having difficulties on understanding how it really works

https://github.com/molefrog/wouter?tab=readme-ov-file#route-nesting

Steps to Reproduce:

1. Create a new React application (using pnpm create vite).
2. Install Wouter (v3.2.1)
3. Implement the following routing configuration

import { Route, Router } from "wouter";
import Orders from "./pages/orders";
import SingleUser from "./pages/singleUser";

export default function App() {
  return (
    <Router>
      <Route path="/app" nest>
        <Route path="users/:id" component={SingleUser} nest>
          <Route path="/orders" component={Orders} />
        </Route>
      </Route>
    </Router>
  );
}

4. Navigate to /app/users/:id/orders in your application.

Expected Behavior

The Orders component should render on the path /app/users/1/orders

Actual Behavior

The SingleUser component renders instead of the Orders component. even though the docs mention following

Finally, the inner-most route will only work for paths that look like /app/users/1/orders. The match is strict, since that route does not have a nest prop and it works as usual.

[molefrog]

Hi @nivethan-me, Route component can't use children when the component prop is given, they are mutually exclusive. What might solve your problem is this:

  return (
    <Router>
      <Route path="/app" nest>
        <Route path="users/:id" nest>
          <Route path="/" component={SingleUser} />
          <Route path="/orders" component={Orders} />
        </Route>
      </Route>
    </Router>
  );