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…
git repo: https://github.com/omri2020/MERN-instagram/tree/master I am desperately trying to figure out a problem that I have with context border. I am using a SocketContext and where ever I try to use the useSocket custom hook I am getting the following error:…
I have a component that holds the four different components const ProtectedRoute = () => { return ( <> <Header /> <div className='flex h-screen overflow-hidden'> <div className="md:block hidden fixed top-[25%] ml-2 opacity-80 hover:opacity-100"> <AdminLinks /> </div> <div className="w-3/4 overflow-auto"> <div…
I am using React-Router and trying to get my loader data using the useParams() hook, but I get the following error: Here is my code: import { useLoaderData, useParams } from "react-router-dom"; export async function githubInfoLoader() { const { username…