Questions tagged [react-router-dom]
Use this tag for questions regarding DOM use and bindings of React Router v4, v5, and v6.
5,521
questions
0
votes
1
answer
28
views
React router redirect if not signed in
I want to open the page up and if I'm not signed in I want it to immediately redirect me to a sign up page. When I open up the app I don't get redirected despite not being signed in, I get sent to the ...
1
vote
2
answers
27
views
React Routing V6 problem, redirecting to another path: '/contact' the content from <Contact /> get updated above nav instead of separate page
I am trying to make Airbnb Clone using React 18, but above nav something like this is happening:
I am using React BrowserRouter V6, whenever we redirect to another page like localhost:3000/about, the ...
3
votes
1
answer
13
views
Putting wrapper components in react router switch
I need to create a layout that only applies to certain routes. However, when I use a Switch and separate the routes that need alternate layouts, if I try to visit a page that doesn't exist it just ...
2
votes
1
answer
15
views
How to access previous index route in nested routes using Link component from react router?
I am building a small react app, and I have implemented my routes like this:
import React, { lazy } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, ...
0
votes
0
answers
15
views
How to insert slash "/" before slash "#" in route?
I'm using the microfrontend concept and I have two projects, which are:
Primary
Secondary
The primary uses BrowserRouter and the secondary HashRouter to not lose remoteEntry and etc.
But the route ...
0
votes
0
answers
15
views
Clicking on Link does not load page but Refreshing does [duplicate]
App.js
import React from "react";
import HomePage from "./pages/homepage/homepage.component";
import ShopPage from "./pages/shop/shop.component";
import Header from "...
1
vote
1
answer
21
views
useLocation doesn't recognize JSON object in state
I've been trying to pass a JSON object from one component to another using useNavigate() and useLocation() in react-router-dom.
I've tried various ways of doing this, following this, and this. The ...
1
vote
1
answer
13
views
Blank page is displayed instead of Bootstrap Navbar that I am trying to create with React Router
I am trying to create a navbar using Bootstrap and React. Even though my code is compiled without any errors the webpage that is rendered is completely blank. Please see my code below for reference:
...
2
votes
1
answer
18
views
Error "Cannot find name CONTEXT" React Router 6 and useContext
I can't find a way to pass my data to all the children with React Router 6 and useContext hook. When I wrap the <Routes></Routes> with my Context.Provider and call it with the Context....
0
votes
1
answer
16
views
NavLink with externalLink [duplicate]
<NavLink target="_blank" to={{ pathname: "mailto:test@gmail.com" }}>
<h3>Say hi...</h3>
</NavLink>
<NavLink
style={{ color: "inherit&...
1
vote
1
answer
22
views
Clicking on a Card component should create a new route and display further information
I'm new to react-router v6
I have 4 components, App, CardList, Card and CardInfo. There is data (an array of objects, each object represents a movie) coming from an API that gets saved in App.js with ...
-1
votes
3
answers
35
views
react-router-dom not working when change path
I am trying to render component Home and About using react-router but I get nothing. I think the problem in the index file with the store. How I can fix it?
Here is a running codesandbox.
index.js
...
1
vote
0
answers
33
views
Electron gives blank Screen when try to serve it
I have this problem regarding electron, I tried to upgrade my electron version from 7.0.0 to 18.2.3 but I got stumbled in this problem where the screen always give me a blank screen after I try to run ...
1
vote
1
answer
48
views
React Router 6 - need to refresh page so that content changes
I have been learning ReactJs on Udemy where lessons are two years old, React Router is not 6 and I am not sure how to modify code so it could automatically refresh page content. This is my index.js:
...
0
votes
2
answers
24
views
How to write dynamic routing in React?
I build an app in React and I try to make a dynamic routing, but my app doesn't wait for the useEffect to end.
What I want to do here is to send to my backend an object from localStorage, check it and ...
0
votes
0
answers
20
views
I am trying to replace One screen with another in my chat app
I am working on a web based chat application, and instead of using a full browser window, I am trying to replicate Linkedin chat UI at the footer, But I am using one view, such that , the first view ...
1
vote
2
answers
31
views
React Dom Routes not working as intended, changes the path but nothing on the page
I am making a webplatform working with the OpenLibrary API, I am pulling data from the subjects then when you click on one of the books in the subjects, I want to be taken to a page called 'Book' ...
3
votes
4
answers
40
views
Pass parameters to another page in React JS
I'm having a problem where I want the information that is being passed on a page to be sent to another page, this other page I say is like a single page.
I've already tried to pass the parameters of ...
0
votes
0
answers
17
views
'react-router-hash-link' does not work on mobile
I am working in a react application and I have a menu nav in my page, one item of the menu list jumps you to the section of the div with that ID
Menu nav
<Link to="/#page1Section">
&...
0
votes
0
answers
14
views
How to set an Authorization Header for all requests under a sub-url in React App
I have built a web application where the frontend was made with React and the backend is made using Python (FastAPI). I'm currently integrating Grafana into the web application and have added auth-...
0
votes
1
answer
11
views
Setting up protected routes in React with react-router-6
I am using keycloak for my React + Typescript app and I need to setup ProtectedRoutes so that certain paths can only be accessed when the user has logged in. I have the keycloak part working but for ...
1
vote
1
answer
30
views
<Outlet /> fails to rerender with react router v6
In the following code, the url changes but the content doesn't rerender until manual refresh. What am I doing wrong here? I could use props.children or something but don't really want to. My ...
1
vote
1
answer
23
views
How to add Navbar and a Sidebar inside the React Router v6 Routes? [duplicate]
I'm building a React application and for routing use React Router V6. In the application, I have a Navigation Bar at the top and a Sidebar on the left side of the application. Using the sidebar I'm ...
1
vote
1
answer
13
views
Is using parts of the URL instead of props for generated class component pages (e.g. specific product page) a good React practice? [duplicate]
I'm new to React, and I'm writing a web store front-end using react router dom to generate pages for the specific product. I split the url for the product page to get product ID and pass that ID as a ...
1
vote
3
answers
34
views
How to redirect to another component after google signin in react
I want to redirect to <Chats /> component after the user has signed in through their gmail ID. I also want the uid and userName to be send as props to the component, but I'm not able to redirect ...
-1
votes
1
answer
27
views
Use a variables inside Route's element
Is there a way to use a variables inside Route's element? The code below run smoothly if I use <Home/> for the Route's element, but failed when I set and use a const, which is HomePage as shown ...
0
votes
0
answers
15
views
Why does React log to Chrome-Console "Content-script injection failed" (from allpages.js) when I never set up code to inject a script?
I am nearly done with my code for my new Website but am really bothered that the following gets somehow logged to my Chrome-Console:
For instance, it gets printed when I switch between pages of my ...
1
vote
1
answer
48
views
React-router-dom V6 don't change route correctly (refresh - f5 page is required)
I'm trying to apply basic route for my Reactjs app with functional component, and Material UI. I put <Link to .../> on navbar and expected when click Menu Item (Cart, Contact, Product) in navbar,...
-2
votes
0
answers
12
views
React router dom error type Node modules error
React router dom error type Node modules error
I am trying to upgrade a project from react-router-dom v5 to v6. I am getting the following error.enter image description here
0
votes
1
answer
27
views
Nested animated routes in React Router V6
I'm really struggling to implement something in React Router Version 6, that was relatively straight-forward in Version 5.
I'd like to not only animate between routes (which is now finally possible in ...
-1
votes
0
answers
28
views
How to get params with ? and & with react-router-dom [duplicate]
I have an email verification URL. in which I have a user ID and a token.
I can not figure it out that how I can extract user ID and token from the URL and also don't know how to set Route path for ...
-1
votes
1
answer
16
views
How to redirect to login page using service.js file of React app?
I have written this code:
export default class AuthService {
static getTwitterOauthToken() {
const url = `${apiUrl}/api/auth/getTwitterAuthToken?oauthCallback=${process.env....
0
votes
1
answer
14
views
Firebase auth React dom router navigate if there is no error
I have a sign up function that will register a user in firebase auth. My issue is that the users gets navigated to the home page even if there is a error with sign up. How can I fix my function to ...
0
votes
1
answer
22
views
Home Component is not rendering when the app loads on Github Pages but loading on Localhost
I am facing this weird issue where the Home component does not load when the app loads.
And this issue is appearing on Github pages site, not on localhost.
On localhost the App component loads as soon ...
2
votes
1
answer
37
views
render in react router dom v6
I am following an example of how you render a function and pass properties, to get some data from the dom.
--- App.jsx ---
import { Routes, Route } from "react-router-dom";
// Components
...
0
votes
1
answer
33
views
Jest: Test useNavigate hook in function component
I'm writing test with Jest and want to test a simple button that serves as logout and redirect you to "/login" via onClick.
import {loginService} from "../../utils/loginService";
...
0
votes
1
answer
28
views
React Router Dom - React Router changing url but not page [duplicate]
I'm trying to make a simple routing system with react, but when i click on a link to navigate to another page it just changes the URL but not showing the content, then when i press F5 it shows ...
0
votes
1
answer
23
views
Getting error while using React Router Dom
I'm new to React, trying to learn and play around with react router, I'm getting following warnings, error while trying to navigate:
Warning: React.jsx: type is invalid -- expected a string (for built-...
1
vote
1
answer
33
views
Should I use React Router redirect OR package.json "homepage" property for setting a relative path as homepage in my React app
TL;DR - I want my React app to start with a relative path domain.com/tweets
Hello everyone, I'm creating a React app that fetches tweets from Twitter API.
Because the whole app is just an SPA built ...
1
vote
1
answer
23
views
how to create deep paths in a tree structure in react-router v6
Here is a codesandbox that illustrates the problem:
If I have a tree of objects like this:
const tasks: Task[] = [
{
id: 1,
name: "one",
children: [
{
id: 3,
...
1
vote
1
answer
34
views
How can I configure React router correctly to navigate to a new page?
I have a navbar containing 3 Anchors, I want to navigate between different pages when clicking on each one.
I've used react-router (version 6.3.0) to achieve this but I faced two issues and I got a ...
0
votes
1
answer
19
views
is there a way to implement react scroll along with react router dom?
I have a navbar with links that scroll to sections of page using react-scroll. i also have several pages and im using react-router-dom for navigating between pages. but when i click on the links in ...
2
votes
1
answer
29
views
I'm getting blank react-app page on using Route
I'm having some kind of trouble when I'm using Router in App.js
I'm getting a blank page when I am using, I tried a lot but couldn't found a way to solve the issue.
<GuestRoute path="/...
1
vote
1
answer
15
views
how to solve Matched leaf route at location "/project" does not have an element error?
I'm learning react routing but when I try to use BrowserRouter I'm getting the following error:
Matched leaf route at location "/project" does not have an element.
This means it will render ...
4
votes
1
answer
27
views
Protected routes not accessible even after signing or logging in
I am making a site whereby after the user signs in, the user is meant to be redirected to the home page. The homepage and all the other pages of the site are only accessible by signed in users but ...
-1
votes
0
answers
49
views
How can I apply React Router v6 and react-transition-group transition to only specific routes?
what can I do if I want to exclude some 'routes' from the transition?
For example, the routes are as follows;
<Routes>
<Route path="/login" element={<Login />} />
<...
2
votes
1
answer
34
views
React + Material UI - Best way to prevent child tree from remount when toggling parent theme
Background
I wanted to follow Material UI's implementation of toggling UI's dark/light mode theme. Link.
I have encapsulated its implementation into a custom hook that returns theme-related properties ...
0
votes
1
answer
24
views
URLSearchParams not parsing query string
Using react-router-dom version 5.
Some component, rendered when matching a <Route />:
...
const { search } = useLocation();
const params = new URLSearchParams(search);
useEffect(() => {
...
0
votes
1
answer
42
views
page needs refresh when click on a route [duplicate]
My problem is that when I click on an element defined by Route, the URL changes but the page does not change and I have to reload the page once to change the page.
i have no idea what is happening ...
1
vote
1
answer
29
views
Creating a history back link and make use of my existing link component
I have a certain generic link component (an atom, I am using Atomic design for structuring my React app), which either returns just a <span> with a Title and arrow icon or when it does have a ...