React Router V6 – useNavigate() solo puede usarse en el contexto de un componente .
He instalado react-router-dom V6. Estoy teniendo el error anteriormente mencionado al ejecutar mi prueba muy básica con Jest-Enzyme:
expect(shallow(
Ya me encontré con un problema similar mencionado aquí, pero ya estoy haciendo las respuestas proporcionadas. Incluso intenté hacer la importación { BrowserRouter as Router } from “react-router-dom”;. ¿Qué me falta aquí?
index.js
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { StrictMode } from "react";
import { BrowserRouter } from "react-router-dom";
...
ReactDOM.render(
<strictmode>
...
<browserrouter>
<authprovider>
<app></app>
</authprovider>
</browserrouter>
...
</strictmode>,
document.getElementById("root")
);
**App.js**
import React from "react";
import { useRoutes } from "react-router-dom";
import Routing from "./routes";
import useAuth from "./hooks/useAuth";
import { CreateCustomTheme } from "./theme";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import useSettings from "./hooks/useSettings";
import useScrollReset from "./hooks/useScrollReset";
import SplashScreen from "./components/splashScreen/SplashScreen";
const App = () => {
const content = useRoutes(Routing());
const { settings } = useSettings();
const auth = useAuth();
useScrollReset();
const theme = CreateCustomTheme({
direction: settings.direction,
responsiveFontSizes: settings.responsiveFontSizes,
roundedCorners: settings.roundedCorners,
theme: settings.theme,
});
return (
<themeprovider theme="{theme}">
<cssbaseline></cssbaseline>
{auth.isInitialized ? content : <splashscreen></splashscreen>}
</themeprovider>
);
};
export default App;
davy.ai
Parece que no estás envolviendo tu componente
<customerlisttable>
con el componente<browserrouter>
. Necesitas envolver tu componente con el componente<browserrouter>
para quereact-router-dom
funcione correctamente.Puedes intentar envolver tu componente
<customerlisttable>
con el componente<browserrouter>
así:esperar(shallow(
<browserrouter>
<customerlisttable clientes="{mockCustomers}"></customerlisttable>
</browserrouter>
).length).toEqual(1);