v6: missing support for Router.basename

[Hotell]

Version

6

Expected Behavior

Router supports basename

Actual Behavior

v6 Router is missing basename which makes it hard to use within various scenarios:

• gradual migration to v6
• web sites that doesn't live at root domain

// url where new router is created: https://my-site/about/users

<BrowserRouter>
  <nav>
    <Link to="">Home</Link>
    <Link to="about">About</Link>
    <Link to="users">Users</Link>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="users" element={<Users />} />
  </Routes>
</BrowserRouter>

interaction

1. click on about
2. path changes from my-site/who/users to /about 🚨🚨🚨

So what needs to be done at the moment -> to provide full path to every link/route (no relative routing possible) 🚫

// url where new router is created: https://my-site/who/users

<BrowserRouter>
  <nav>
    <Link to="">Home</Link>
    <Link to="who/users/about">About</Link>
    <Link to="who/users/users">Users</Link>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="who/users/about" element={<About />} />
    <Route path="who/users/users" element={<Users />} />
  </Routes>
</BrowserRouter>

interaction

1. click on about
2. path changes from my-site/who/users to my-site/who/users/about ✅

[Hotell]

Only possible way how to mitigate this is do introduce a "mediator" route via Embedded route

// url where new router is created: https://my-site/who/users

const RootModule = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route
{/* basename alternative ✅*/}
          path="who/users/*"
          element={<MigratedRouteModule />}
        />
      </Routes>
    </BrowserRouter>
  );
};

const MigratedRouteModule = () => {
  return (
    <section>
      <nav>
        <Link to="">Home</Link>
        <Link to="about">About</Link>
        <Link to="users">Users</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="users" element={<Users />} />
      </Routes>
    </section>
  );
};

[Hotell]

ha! lack of docs ( i know alpha ) - use source code Martin!

Solution: Routes has basename.

// url where new router is created: https://my-site/who/users
const RootModule = () => {
  return (
    <main>
      <BrowserRouter>
        <Routes basename="who/users">
          <nav>
            <Link to="">Home</Link>
            <Link to="who/users/about">About</Link>
            <Link to="who/users/users">Users</Link>
          </nav>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="who/users/about" element={<About />} />
            <Route path="who/users/users" element={<Users />} />
          </Routes>
        </Routes>
      </BrowserRouter>
    </main>
  );
};

I can submit PR that updates migration guide if you want @mjackson lemme know! cheers

[timdorr]

Go right ahead and submit a PR. I don't think anyone is going to say no :)