20,550 questions
Advice
2
votes
1
replies
119
views
react-router OR react-router-dom
I had a question about why we need to have two types of react-router and react-router-dom and I wanted to understand the difference between these two packages and which one is better for today's webs ...
Best practices
1
vote
3
replies
119
views
How to implement role-based navigation in a React Navbar using Context API and React Router?
import { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { Menu, X, Target, Receipt, ScanSearch, TrendingUp, Home, ShieldAlert, BookOpen, User, ...
Advice
1
vote
2
replies
75
views
How does React Router v7 choose between two equally specific matching routes?
I'm using React Router v7 and trying to understand how route matching works when multiple routes can match the same URL with the same level of specificity.
For example:
<Routes>
<Route path=...
Score of 1
2 answers
229 views
How to redirect user to home if they're already logged in and is trying to access the login page?
I have a component that redirects the user to whatever protected route they were trying to access after they log in via:
export const ProtectedRoute = () => {
const { token } = useAuth()
const ...
Best practices
0
votes
4
replies
128
views
What is a good way to find current route and render contents depending on it?
I am looking for the best way to find the current route using react-router and and then render certain contents depending on that route. Currently the only way I found was to use either useLocation() ...
Score of 3
1 answer
205 views
How to handle partial dynamic route segments in React Router v7?
I am currently migrating my codebase from React Router v5 to v7 and have hit a roadblock regarding route validation.
In my older v5 codebase, we relied on path-to-regexp support to create routes with ...
Score of 0
0 answers
50 views
About using react-router-v5 on Electron [duplicate]
I want to use react-router v5 in electron app. I have a navbar component like this. But whenever I click on an Navlink (by default it's Home), it don't switch to exact component as I want. Here is my ...
Score of 2
1 answer
114 views
Solving conflicting react router redirects
I am working on a basic app with React, Redux and React Router 7. This app has a /profile route which is protected. If you go on a protected route without being logged in, you are redirected to /...
Best practices
0
votes
3
replies
459
views
Source of truth: state (zustand) vs url (react router)
I've got a question!
I have an app where I use Zustand for my state management. For example I have states for the currentProject, current dataset and current view which decides what it shown.
I now ...
Advice
0
votes
2
replies
277
views
useNavigate vs window.location.href( or window.open)
Title
React Router navigate does not work with external URLs
Body
I am working on a project where clicking a lecture card should redirect the user to an external website such as Udemy or Inflearn.
At ...
Advice
4
votes
2
replies
396
views
React Router v7 SPA mode: How to use strict CSP?
I'm migrating an app from React Router v6 + Webpack to React Router v7 (SPA mode) + Vite and I'm having issues with setting a strict Content Security Policy.
In RR6 I had a normal index.html and ...
Score of 3
1 answer
217 views
How does it work (internally) when returning Navigate component in React Router v7?
I'm trying to implement a redirect based on a property passed to a component nested deep within my route hierarchy. Right now I know 2 options how to do it.
const MyComponent = ({ variable }: { ...
Tooling
0
votes
3
replies
76
views
React router dom
I want to use react-router-rom and can we still use react-router-dom V5 in today's date? since it support custom route components, while react-router-dom V6+ has strict rules to use Route & Routes....
Score of 2
1 answer
112 views
Reuse the same user routes under '/' (UserLayout) and '/admin' (AdminLayout) without duplication
I need to define user pages (Home, Cows, Reports, …) once and make them accessible to AppUser + Admin under "/" with UserLayout, and also accessible to Admin under "/admin/user/*" ...
Score of 3
1 answer
89 views
How do I pass data inside fetch function from createBrowserRouter to load content before page has loaded
I'm using react-persist in my application. When I click to add a product to my basket and then want to navigate to my basket page, how do I pass the basket data to the fetch function in the loader ...