Traté de crear el enlace useRoutes desde react-router-dom@6.4.1 para crear mis rutas de aplicaciones usando JS, así en mi route.jsx:
import { useRoutes, } from "react-router-dom";
import TestPage from "../Pages/Public/TestPage";
import TestPageTwo from "../Pages/Public/TestPageTwo";
const.netirectRoutes = [
{
path: "/no-match",
element: () => <div>No Match found</div>,
},
];
const Router = () => {
const router = useRoutes([
{
path: "/testPage",
element: <TestPage />,
loader: false,
},
{
path: "/testPageTwo",
element: <TestPageTwo />,
loader: false,
},
...netirectRoutes,
]);
return <BrowserRouter>{router}</BrowserRouter>;
};
export default Router;
y en mi app.jsx, importé el archivo así:
import { Provider } from "react.netux";
import Router from "./Router";
import initializeStore from "..netucer/initializeStore";
import "./App.css";
export const store = initializeStore();
const App = () => {
return (
<Provider store={store}>
<Router />
</Provider>
);
};
export default App;
Esto resultó en el siguiente error:
Error no detectado: useRoutes() solo se puede usar en el contexto de un componente.
Como puede ver, envolví las rutas usando BrowserRouter en app.jsx, pero sigo recibiendo este error. Sin embargo, pude resolver esto cuando moví BrowserRouter a app.jsx en lugar de rutas. .jsx, así:
aplicación.jsx:
...
const App = () => {
return (
<Provider store={store}>
<BrowserRouter>
<Router />
</BrowserRouter>
</Provider>
);
};
...
y, en rutas.jsx, solo devuelvo el enrutador que se crea usando useRoutes();
No entiendo por qué necesitamos envolver el BrowserRouter de react-router-dom@6 en app.jsx de esta manera en lugar de route.jsx.
En react-router y react-router-dom los componentes del enrutador son el componente que proporciona un contexto de enrutamiento para que accedan todos los enlaces y componentes RRD. Es un contexto React y debe proporcionarse más arriba en ReactTree que cualquiera de los componentes que lo consumen.
no funciona:
const Router = () => {
const router = useRoutes([ // <-- accessed here outside context, error!!
....
]);
return <BrowserRouter>{router}</BrowserRouter>; // <-- provided here
};
...
const App = () => {
return (
<Provider store={store}>
<Router />
</Provider>
);
};
Obras:
const Router = () => {
const router = useRoutes([ // <-- accessed here inside context, no issue :)
....
]);
return router;
};
...
const App = () => {
return (
<Provider store={store}>
<BrowserRouter> // <-- provided here
<Router />
</BrowserRouter>
</Provider>
);
};
Consulte API de contexto de reacción para obtener más detalles.