I have a system providing a members only section. I'd like to test if, when an unauthorized user opens a URL from the member section, they get forwarded to the login page. In my test I render the whole application.…
I am facing an issue with React Router Dom v6 where my page goes blank after adding the scroll-to-top functionality. I have followed the documentation and tried different approaches, but I couldn't find a solution. The page renders correctly without…
I'm writing a React app using react-router-dom for navigation. When using navigate(), I can see in devtools that the 'root' root component is being rendered. However, in the code snippet below, the console does not work, what is the reason…
I have a login form such below: const Login = () => { const { user } = useAuth(); const navigate = useNavigate(); if(user) return (<Navigate to="/dashboard"/>); const handleLogin = async (e) => { e.preventDefault(); try { const login =…
I'm facing an issue with React Router where the routes are not rendering correctly. I have defined my routes using the <Routes> component and nested <Route> components within it. However, I'm getting the following error: Uncaught Error: A <Route> is…
I've been working with react-router-rom v6 for a little while now and was experimenting with nested routes. I had experience doing this in v5 without problem. I have followed some tutorials and looked up examples how to properly do nested…
I am using a combination of react-router-dom and Material-UI in my app. I've tried to make a very basic example below with the following files: routes.tsx import { Outlet, createBrowserRouter } from "react-router-dom" const App = () => { return…
I created a React 18 app that uses React Router 6 <body class="h-full"> <div id="root"></div> <script src="/src/main.tsx" type="module"></script> </body> </html> main.tsx: const container = document.getElementById('root') const root = createRoot(container) root.render( <React.StrictMode> <BrowserRouter basename={'/'}> <Routes> <Route path="/" element={<Shell />} /> </Routes>…
I'm using react with VITE and react-router-dom Hosting the react application locally works very well, if it hosted on any online hosts services like NETLIFY, VERCEL or HOSTINGER also works great but if I passed to a new routed page…
On the React project I'm currently working on I am using Vivus to animate svg images and so far it is working on all my pages. This changed once I added a nested url routes... Vivus works ... http://localhost:3000/market-applications Vivus…