This question already has answers here: How to create a protected route with react-router-dom? (7 answers) Closed yesterday. I’m encountering a problem in my React application where, after logging in, refreshing a protected route redirects me to the root path (‘/’), but when I refresh on a non-protected route like /myaccount, it does not redirect. […]

While I try to Add my About Us page link in NAVBAR and then add that in the app.jsx the home page gets mixed with it and somehow it is a bit messy Like when I don’t add the navbar links it works perfectly fine but when I try to add
for eg I tried to add in the Home section of my Navbar i.e the AboutUs sub one in home section
I get the error of that the about page style gets overlapped with my Home page

I am trying to implement an authentication/login flow with React and React Router v6.

I want my pages to be navigating smoothly. I’m not sure if I’m using my Routing right!

I am experiencing a problem with useLoaderData() hook, While using react-router Form component with GET method. I have programmed the loader to return deferred data, and I am using Suspense in my component to render a Loading icon until the promise is resolved. This works as intended on the initial render, i.e:

New to React: I am trying to update a “story” that is in an array stored in state.

(With help of ChatGPT) I developed code that prevents not intended browser tab close when the user is in a certain route of my React app with BrowserRouter:

I am using react-router version ^6.25.1 , I want the user to be redirected to the home page /home if he logged in before i am using firebase-auth I check if the user is logged in via onAuthStateChanged observer provided by firebase if there is a user logged the promise is resolved if not it gets reject i am using a loader function to do this check if i call the loader function in my root “/” element the page keeps loading and I am not redirected however if i do that in other pages such as “/LoginPage” i am able to redirect to the home page /home here is the structure of my routes :

React Router: “Invalid hook call” when using higher-order components for authentication Problem I have two different implementations of authentication wrappers for my React components using React Router. The first implementation works correctly, while the second one causes an “Invalid hook call” error. I don’t understand why this is happening. Working Implementation import { PropsWithChildren } […]

NOTE:: this is a scenario that i’m describing here as i need same in real app. in my actual app, i need 3 or 4 level nested routing. i’m using index because when i’ll visit the tab list1, url would be /profile and list1 should be there by default and list1 should render productList as its child.
if i go to list2 tab, url will /profile/list2/items and list2 should render with productList and same for list3.
if i go to list3 tab, url will /profile/list3/items and list3 should render with productList.