I have a React frontend. The code follows below. My problem is that I need to get route information outside <Routes>, in navigation menu and I can't use useParams(). On the other hand, I tried to move <Routes> outside <NavMenu>…
I am trying to redirect user after successful login. I did it this way but it does not work. How can I fix this issue or how can I do it correctly? main.jsx Login.jsx imports ... function Login() { const…
I have two sets of routes defined in different files. I want them both to be appended to the same path. There is no overlap in the route names. e.g. const EditRoutes = () => <Routes> <Route path=":id/edit" element={<EditPage />}…
Below are the codes for simple login, but even after successful login the navigation is not working. I am unable to resolve this login.js import './Login.css' import { Link, useNavigate } from 'react-router-dom'; import { useState } from 'react'; import…
I'm learning the latest version of React and React-Router-Dom, I create a simple demo app. Home.jsx import React from "react"; const Home = () => { return ( <div>Home</div> ) } export default Home; About.jsx import React from "react"; const…
I would like it to work in the form of the 3rd route. Previously, if it was used, Navigate would not be called to display the Navbar on the page of the component, but if Homepage or Product was called,…
I have implemented authorization in React. I want the user to not be able to go to other pages of the application without authorization. I created the following component. import { ReactNode } from "react"; import { Navigate } from…
Trying to create a minimalist React Application using CDN to test React-router-dom. The below code works fine: <html> <head> <meta charset='UTF-8'> <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script> </head> <body> <div id='root'></div> <script type='text/babel'> const Link =…
I'm trying to create an app but it is facing some issues. When I run the command npm start it started showing this error. I'm trying to upgrade the react-router-dom from v5 to v6 but I am getting this error…
"If the user is already authenticated, I aim to restrict their access to the login page. Currently, when attempting to navigate to '/login' while already logged in, the system still redirects to '/login'. However, my intention is to prevent this…