I have prepared a simple test case at Github for my question: In my App.jsx there is following code: <NavDrawer /> <BrowserRouter> <Routes> <Route path="page1" element={<Page1 />} /> <Route path="page2" element={<Page2 />} /> <Route path="page3" element={<Page3 />} /> <Route path="*"…
I am fairly new to React and I am facing this problem. I am using NPM version: 10.4.0 and NodeJs Version: v20.11.0 Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null. TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as…
i was trying to using params prop in the loader prop in the routes, since i am using typescript i define the params as shown below but typescript is yelling at me i do not know why? please any way…
So I have build a demo site with a form of submiting a new user. The files: App.jsx: import React from 'react'; import './App.css'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; //components import Home from './pages-views/Home.jsx'; import AboutUs from './pages-views/AboutUs.jsx';…
After successful login I want to redirect to "/dashboard". I cannot use useNavigate() hook as it is in App.js file and it is not inside <Router> component. Below is my code. import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import Login…
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: You might have mismatching versions of React and the renderer (such as React…
On our project, we were using version 4 of react-router, and we have migrated to version 6. However, we are encountering an issue that I cannot identify since the change from the useLocation API to useNavigate. Here's my function: import…
In my React Testing Library unit test, I am unable to get the Navlink by role. getByRole('link', { name: 'help' }) - This fails The Navlink does not have text, rather it has a help icon which seems to be…
I am working on implementing a new React Router. I am using the new createBrowserRouter and want to implement some loader API calls. I have my project set up to make these API calls properly, however I can't find any…
I'm trying to make protected routes for my app, but Route component seems to not accept as an element. I'm trying to: import { BrowserRouter as Router, Navigate, Route, Routes, } from 'react-router-dom'; ... <Router> <Routes> <Route path={DASHBOARD_PATH} element={ <ProtectedRoute…