Location returned from useLocation() is "/" for routes with "empty" path ("")

[acelaya]

We have noticed that, with a structure like this:

function Foo() {
  const [location] = useLocation();
  return <div>Location is: '{location}'</div>
}

function Home() {
  const [location] = useLocation();
  return <div>Location is: '{location}'</div>
}

function App() {
  return (
    <Route path="/the-prefix" nest>
      <Switch>
        <Route path="/foo">
          <Foo />
        </Route>
        <Route path="">
          <Home />
        </Route>
      </Switch>
    </Route>
  )
}

If you visit /the-prefix/foo, you get '/foo' printed, and visiting /the-prefix/foo/ does not match any route, as expected. EDIT: Actually just noticed visiting /the-prefix/foo/ also matches the first route.

On the other hand, if you visit /the-prefix, you get '/' printed, rather than '', and visiting /the-prefix/ results in the same route being matched.

We imagine this is related with this logic, which falls back empty strings to "/", but we were wondering if this was intentional, and if so, what's the reason, or if this is just a historical behavior.

[molefrog]

Hi, here is how matching works by default:

1. Matching is not strict, meaning that trailing slashes are ignored so "/foo" is the same as "/foo/". It's common behaviour that apps and web servers use. However, you can opt-in for strict route matching
2. Empty string path is the same as "/", however when you omit it completely (when it's undefined) this is treated as a "default" route, so in a switch it is identical to "*"

[molefrog]

Also, we assume that "" is not a valid location and it should always start with a slash. This simplifies many things internally such as relative routes, nesting etc.

[acelaya]

Thanks for the clarification 🙂