Link to "/" with basename adds extra trailing slash

[mmartha]

Version

4.2.0

Test Case

https://codesandbox.io/s/6llwm7m8zz

Steps to reproduce

<BrowserRouter basename="/foo/bar">
    <Route path="/" component={App}/>
</BrowserRouter>

<Link to="/" />

Expected vs. Actual Behavior

the link takes me to http://host/foo/bar/ (with trailing slash) when I expect http://host/foo/bar (without trailing slash)

[timdorr]

When using a basename, this is expected behavior for the root route.

[mmartha]

thanks @timdorr, I've implemented a server side redirect as a workaround, looks like I'll just stick with that!

Do you have any explanation or link to a discussion thread for why this was decided to be the expected behavior? It doesn't seem ideal since the root route is a file rather than a directory.
Additionally, it seems strange that the root route's behavior (wrt trailing slash) would differ when using basename vs. when not.

[ajenkins-kyr]

Is there any way to get the behavior that @mmartha is looking for using basename without implementing some kind of redirect behavior? This seems like a very normal use case and I can't figure out a working solution other than not using basename altogether.

[mstarrrsui]

When using a basename, this is expected behavior for the root route.

@timdorr Can you pls elaborate on why this is the case?

Given:

  <BrowserRouter basename="/foo/bar">
      <Route path="/" component={App}/>
      <Route path="/baz" component={SomeBaz}/>
  </BrowserRouter>

I'm struggling to understand why 'foo/bar' (root route) adds a trailing slash yet 'foo/bar/baz' does not add one. Other than redirects, is there anyway to stop this happening?

[brophdawg11]

This use case should be achievable after the changes in #8861. The basename + link should now be able to control trailing slash behavior when routing to the root:

This setup:

<BrowserRouter basename="/app">
  <Routes>
    <Route path="" element={
        <>
          <Link to="" />  {/* No trailing slash */}
          <Link to="/" /> {/* Trailing slash */}
        </>
      }
    />
  </Routes>
</BrowserRouter>

Should render:

<a href="/app">
<a href="/app/">

The same goes with navigations upwards to the root - <Link to="../.."> would not include a trailing slash but <Link to="../../"> would.

The new logic should be such that if either basename or the <Link to> have a trailing slash, the resulting URL should have a trailing slash. If neither have one, the resulting URL will not.