Quiero usar ese Hashrouter, pero cuando lo intento, aparece este error:
<Router basename="/admin"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything.puse "Página de inicio": "./admin" en packjson
pero cuando uso BrowserRouter, se procesa normalmente, ¿alguien puede explicar por qué, por favor?
El código que estoy usando para tratar de entender el enrutador v6:
import "./styles.css"; import { BrowserRouter, Routes, Route, Navigate, Outlet, Link, HashRouter, } from "react-router-dom"; const ProtectedRoutes = () => <Outlet />; const Configuration = () => <h1>Configuration</h1>; const SummaryPage = () => <h1>SummaryPage</h1>; const Dashboard = () => <h1>Dashboard</h1>; const Appointments = () => <h1>Appointments</h1>; const NotFound = () => <h1>NotFound</h1>; export default function App() { return ( <HashRouter basename="/admin"> <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <Link to="/dashboard" className="link"> Home </Link> </div> <Routes> <Route path="/configuration/configure" element={<Configuration />} /> <Route path="/configuration" element={<SummaryPage />} /> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/appointments" element={<Appointments />} /> <Route path="/" element={<Navigate replace to="/configuration" />} /> <Route path="*" element={<NotFound />} /> </Routes> </HashRouter> ); }En su mayoría, parece haber un malentendido con la forma en que se aplica el HashRouter basename Con el HashRouter el accesorio de basename es un valor que se aplica en las rutas que maneja la aplicación, no en la ruta del dominio donde se sirve/ejecuta la aplicación.
Ejemplo:
<HashRouter basename="/admin"> <Link to="/dashboard" className="link"> // renders <a href="#/admin/dashboard"> Dashboard </Link> ... <Routes> <Route path="/configuration"> <Route path="configure" element={<Configuration />} /> <Route index element={<SummaryPage />} /> </Route> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/appointments" element={<Appointments />} /> <Route path="/" element={<Navigate replace to="/configuration" />} /> <Route path="*" element={<NotFound />} /> </Routes> </HashRouter> En otras palabras, el valor prop del basename se aplica al hash de la URL y no a la ruta de la URL, es decir, se aplica a todo después del hash.
mysite.com/someSubdomain/#/admin /something / ... more nested paths |--domain-|--subdomain--|#|--------------hash-----------------| | | | |basename| app path | ... app subpaths Si desea que aparezca "/admin" antes del hash, entonces esto es parte de donde se implementa y se sirve toda la aplicación. En este caso, la aplicación debe implementarse en mysite.com en un subdirectorio "/admin" . Tampoco necesitará especificar basename="/admin" si no desea que aparezca un "/admin" adicional en el enrutamiento de la aplicación.
mysite.com/admin/#/something...
<HashRouter> <Link to="/dashboard" className="link"> // renders <a href="#/dashboard"> Dashboard </Link> ... <Routes> <Route path="/configuration"> <Route path="configure" element={<Configuration />} /> <Route index element={<SummaryPage />} /> </Route> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/appointments" element={<Appointments />} /> <Route path="/" element={<Navigate replace to="/configuration" />} /> <Route path="*" element={<NotFound />} /> </Routes> </HashRouter>actualización: No es una solución =[ el nombre base no funciona en Rutas, y el hashrouter no funciona con el nombre base
Alguna solución aquí:
https://github.com/remix-run/react-router/issues/7128#issuecomment-582591472
pero no se si es el mejor.
// 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> ); };y aquí trabajando