Actualizado de "react-router-dom": "^5.1.2" a "react-router-dom": "^6.3.0"
La aplicación tiene algunos Context.Providers justo fuera de BrowserRouter , una ruta 404 y algunas rutas anidadas implícitas para algunas páginas (indicadas por path no exact path )

código:

índice.js

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; import { BrowserRouter, Routes, Route } from "react-router-dom"; ReactDOM.render( <App/>, document.getElementById('root') );

./componentes/App.js

 import React, { useState } from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import TierA from "./TierA" import TierB from "./TierB" import Catalogue from "./Catalogue" import Admin from "./Admin" import NotFound from "./NotFound" // this is the 404 page component import PlayerContext from "./Player/context" import SearchContext from "./Search/context" import { useSearch } from "../hooks/useSearch" const App = () => { const searchText = useSearch() const [playerItem, setPlayerItem] = useState(null) return ( <React.Fragment> <SearchContext.Provider value={searchText}> <PlayerContext.Provider value={{ playerItem, setPlayerItem }}> <BrowserRouter basename={process.env.PUBLIC_URL}> <Routes> <Route element={TierA} exact path="/a_tier" /> <Route element={TierB} exact path="/b_tier" /> <Route element={Catalogue} path="/catalogue" /> <Route element={Admin} path="/admin" /> <Route element={NotFound} path="*" /> </Routes> </BrowserRouter> </PlayerContext.Provider> </SearchContext.Provider> </React.Fragment> ) } export default App;

Antes de actualizar a react-router-dom v6, la versión anterior solía representar la página 404 al acceder a la base / ruta y las rutas nombradas se representaban correctamente.
Ahora, al presionar cualquiera de las rutas anteriores, se muestra una página en blanco, no se destacan advertencias ni errores en la consola. Por favor, avise, gracias de antemano.

se ejecuta con npm start

 "scripts": { "start": "react-scripts start", ...