[Bug]: v6 BrowserRouter set basename, not match “/”

What version of React Router are you using?

6.0.2

Steps to Reproduce

step 1:

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

step 2:

// ...
const Login = () => {

    return (
        <div>
            login page
        </div>
    );

};
const Home = () => {

    return (
        <div>
            Home page
        </div>
    );

};
// ...
<BrowserRouter basename='fe'> // basename set a word,example: fe 
    <Routes>
        <Route path='/login' element={<Login />} />
        <Route path='/' element={<Navigate to='/login' replace={true} />} />
        <Route path='/home' element={<Home />} />
        {/* <Route path='*' element={<Login />} /> */}
    </Routes>
</BrowserRouter>

step 3: Open the browser; Enter the address URL:http://localhost:port is error, example step 4;（But v5 is ok） But I must enter the full address URL: http://localhost:port/fe is ok; step 4: browser Console：<Router basename="/fe"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything.

Expected Behavior

The user does not enter the complete URL containing the basename, I hope that the browser can enter the root domain name, there is also a way to match Login

Actual Behavior

browser Console：<Router basename="/fe"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything.

Issue Analytics

State:
Created 2 years ago
Comments:14 (1 by maintainers)

Top GitHub Comments

21reactions

timdorrcommented, Dec 2, 2021

This is the expected behavior. You need to include the basename in the URL for the page itself for the Router to match anything.

17reactions

bycaldrcommented, Mar 2, 2022

I had to fix the missing redirect to basename during migration from v5 in client-only project and I’ve ended up with this solution:

index.jsx

import React from 'react';
import { render } from 'react-dom';

import './utils/ensure-basename';

render(
  <BrowserRouter basename={config.ROUTER_BASE_URL}>
    {/* ...routes */}
  </BrowserRouter>,
  document.getElementById('root')
);

utils/ensure-basename.js

import { config } from '../config';

if (!window.location.pathname.includes(config.ROUTER_BASE_URL)) {
  window.history.replaceState(
    '',
    '',
    config.ROUTER_BASE_URL + window.location.pathname
  );
}