Questions tagged [react-router]
React Router - A complete routing library for React inspired by Ember's routing system
20,207
questions
0
votes
0
answers
9
views
Preserve Exit Animations with React Router v6 and Framer Motion
I'm currently working on a project that involves React Router and Framer Motion v6. I'm trying to preserve exit animations between routes, but I've run into a bit of a roadblock.
Does anyone have ...
0
votes
1
answer
25
views
React App - After Deployment Blank Page on Refresh for all Children pages. Locally all works perfect
My React App won't render any of children pages (including NotFound page) when refresh is performed.
When using buttons within the app, all pages renders correctly. This is happening only on hosting ...
1
vote
1
answer
21
views
react-router v6 createRouterBrowser
I am trying to implement react-router in my app. I saw there is now data loading possible within the routing therefore I had to use the createBrowserRouter. I seem to not fully understand how it is ...
1
vote
1
answer
33
views
is there a way to invoke loader method from within the component in react
I am using a loader from react-router-dom to fetch data to be used in the component. I also have another function from within the component which updates some information which are initially fetched ...
-1
votes
2
answers
32
views
Uncaught TypeError: Cannot read properties of undefined (reading 'params') - React Router Issue
PropertyDetails.jsx
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import '../styles/propertydetails.css';
import Navbar ...
0
votes
1
answer
21
views
useLocation() error appears when requireAuth is used [duplicate]
I am using react router with react-auth-kit, now in my app.js
import Home from "./pages/Home";
import Login from "./pages/Login";
import { Routes, Route, useLocation } from "...
-1
votes
0
answers
14
views
React components rendering when on home route and refreshing the page but not when in a different route
I'm attempting to build a chat app using React and Firebase.
The issue I'm having is that when I'm inside the ChatsHome component and refresh the page, App.js is rendered and the useEffect hook inside ...
0
votes
0
answers
20
views
Use API call data in another page react/typescript
I am trying to get the recipe info I collected from the api in the Home.tsx page and display it in RecipeLayout.tsx.
I am currently just passing the data through props, so RecipeLayout.tsx is directly ...
-1
votes
0
answers
30
views
React Router v6.15 lazy not rendering Suspense's fallback component
So i have been stuck on this issue with react router where the Suspense's fallback component wont render in any layout hierarchy except adding it to the RouteProvider like this.
<RouterProvider ...
1
vote
1
answer
26
views
Using React Router v6 to swap two different sections of my web app
I am using React Router v6 for my new web app. I am using the Outlet with nested routes to swap out the <main> component and that is working nicely. Now I also have an aside left panel to the ...
0
votes
0
answers
9
views
AllowedRoles in react lead to unothorized page, though role is correct [duplicate]
The target is to implement protected routes using RTKQuery and React Router 6. The problem is that whenever i reload the page I get redirected to unouthorized component, not to the outlet
I am trying ...
-1
votes
0
answers
23
views
Getting error in Nested Routing with react-router v6 [closed]
I am using new version of react-router-dom which is just released new version but I am having issue when using nested routing. I checked official documentation but don't understand.
In this layout is ...
-2
votes
1
answer
28
views
navigate function does not rerender the component
first of all my project link on github: https://github.com/ARN1380/BookingHotel
I'm using react-router dom v6,
I have a BookmarkList in my project and I need to add or delete bookmarks from it, the ...
-1
votes
0
answers
14
views
when the react detail router jump ,but the picture was not immediately changed [closed]
There are pictures or videos in the details page, when the details page jumps to the details page, the resource does not take effect immediately, but will display the content of the previous details ...
2
votes
1
answer
33
views
redirect routes with react state
I would like to check if my cms is installed (with a api call to my backend).
I can fetch the value, I can see the "ok" value into console, but I'm not redirected to /login as expected.
I ...
-1
votes
0
answers
25
views
React Route: NavBar not rendering [closed]
The problem I am facing is related to React-Router, where the NavBar component is not rendering as expected in my application. I am attempting to create a consistent layout that includes a NavBar ...
1
vote
1
answer
20
views
React-Router - Run a parent route loader function each time one if its sub-routes is matched
Is it possible to re-run a root route loader function each time a sub-route is matched instead of just on the first time the root route is matched?
I'm trying to handle some redirect logic in the ...
1
vote
0
answers
20
views
SignalR with React Problem - Websocket events doesn't work when navigating
I use ASP Web Api as a backend for my application, and React for Frontend with react router
we have a chat in some page that listens for new messages however
when I navigate to another chat room using ...
-1
votes
0
answers
13
views
React router overriding other subdirectories in CPanel
I'm working on a website using React, but I'm having some problems with the project.
In the root directory, which I will call "www.mywebsite.com/", the company's landing page appears, made ...
2
votes
2
answers
29
views
React BrowserContext is lost in sub-sub-children
I have a Browser Context set up like this:
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<BrowserRouter>
<ErrorBoundary FallbackComponent={...
-2
votes
2
answers
29
views
How can I find a url in history stack [closed]
In my React typescript application I am using React Router to navigate through the App. The workflow is as follows:
User types in a search term in a textfield and hits "Search"
User gets ...
0
votes
0
answers
15
views
Browser-Router from react-router-dom is giving me an error about hooks and i dont know what the cause is
i'm working on a project in react js and i want to create the routes to navigate to different pages, but when i use Browser router from react-router-dom it gives me the error:
Uncaught Error: Invalid ...
-1
votes
2
answers
54
views
useEffect with no deps trigger browser router twice
I have a component called categories.js which will be called in App.js, there is a useEffect in categories.js as the following
useEffect(() => {
const fetchCategories = async () => {
...
-1
votes
0
answers
22
views
Getting 404 error when using React router dom in a Next js app
I found myself using React router dom in a next js app instead of the in build routing system of Next js. Now i get a 404 error each time i reload the browser.
I thing it's due to sever-side rendering ...
2
votes
3
answers
50
views
React - get parameters from route path in another component
I tried to find it, but I couldn't do it. I tested many results but the effects were disappointing.
So I have this structure of application:
<BrowserRouter>
<Menu/>
<Routes>
&...
-2
votes
0
answers
49
views
No routes matched location problem in React
This is the problem I'm facing:
history.ts:501 No routes matched location "/Trailer/JaV7mmc9HGw"
My App.js returns this:
return (
<div className="App">
<...
1
vote
1
answer
41
views
Breadcrumbs Issue with React Router (6.16.0) and TypeScript
I've been working on learning React-Router (6.16.0) by creating a simple Breadcrumbs navigation using isMatches() as they recommend in their documentation here: https://reactrouter.com/en/main/hooks/...
1
vote
1
answer
26
views
Can I use both Hash Router and normal router in different builds?
I want to make a fully responsive site, and I want to wrap it with Cordova to make a mobile app.
But Cordova only supports hash router.
Can I make my mobile build use Hash Router instead of the normal ...
1
vote
1
answer
31
views
React: avoid redirect to first step wizard when pressing back button in wizard
I'll try to explain this as clearly as possible.
I have a wizard component that works like this:
I open the wizard and fetch all the steps
Then I redirect to the first step by using the React Route
&...
0
votes
0
answers
17
views
I imported the useParams() hook and destructured it in a component so as to give the route an id but its throws an error "useParams is not a function" [closed]
code showing "useParams is not a function".
import { useParams } from "react";
const BlogDetails = () => {
const { id } = useParams();
console.log(id);
const {
data: ...
-2
votes
0
answers
28
views
Render component which uses "useLoaderData" to load data
I have the below React component which uses React Router 6's useLoaderData to load the data required for the page. Can anyone help me with how the below component needs to be rendered to load a mock ...
1
vote
1
answer
15
views
React Router Error when using URL Params in Loaders
I'm using React-router in my React project. I have a movie page which looks like this
import axios from 'axios';
import React from 'react';
import { useLoaderData } from 'react-router-dom';
export ...
1
vote
0
answers
10
views
React Router different layouts for different Routes [duplicate]
I use two different layouts in the application: for content (MainLayout with footer and borders) and empty (BlankLayout without footer and borders).
export type LayoutProps = {
children: ReactNode,
}...
-2
votes
0
answers
47
views
React js only displays 1 HTML page in the view source
I use React JS on my website, with more than 3 pages, but when I view the source why only the Homepage page appears. What is the solution so that my web displays all the html tags like other webs (...
-1
votes
0
answers
42
views
How to listen to back button in the browser to warn user for unsaved data in React?
I'm trying to warn the users about unsaved data when they click the back button to navigate away from the page. I'm using React Router V6 so usePrompt or useBlock hooks are not available. They have ...
-1
votes
0
answers
32
views
navigate("/") not redirecting after POST request
import React, { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
const Add = () => {
const [pelicula, setPelicula]...
0
votes
0
answers
25
views
Wait for dispatch action to be completed before redirecting back to previous page in a modal
I have the following modal that I am using in my react application to delete a project. I am passing a function as a props to the modal that dispatches the delete action.
<DeletionModal
...
0
votes
2
answers
42
views
React-router 6 errorElement not rendering an error component
In my react app I'm trying to render custom error component for unmatched routes but default error page is shown.
This is how my browserRouter looks.
const router = createBrowserRouter([
{
path: ...
1
vote
1
answer
44
views
React Router Redirect Issue When Clicking Links
I'm encountering a problem with React Router where I have a header component and a home component, and I want to navigate to a movie detail page when a movie is clicked. The issue is that when I'm ...
-1
votes
0
answers
40
views
I can't access a URL with query params from outside the site
I am using react-router-dom@5.2.0. I need to access this URL "/invitation/admin?token=1234" from outside my react site. I have declared a route "/invitation/:roleUser", but I don't ...
1
vote
1
answer
47
views
Routing problem: Index.html blank after deploying React App on render
I finished a react project and after deploying it to Render everything is blank. I tried everything I found as solutions to this problem but nothing worked.
To simplify the matter for me and to ...
-1
votes
0
answers
10
views
How to Wrap Specific Routes in a Separate Context in React Router v6? [duplicate]
Wrap Routes in Context
Default (GPT-3.5)
User
I have a problem I want to ask on Stack overflow.
Help me prepare a text.
I'm working on this react project. The developers implemented routing using ...
2
votes
2
answers
33
views
ReactRouter not recognizing a valid path and it's rendering NotFound
I'm coding a lyrics fetcher app (ReactJS + Redux + React router) that consists of a landing page where the app renders the top 10 tracks for the user's country, and also a search form to search for ...
-1
votes
0
answers
14
views
Need help replicating React code sandbox in Next.js (ReferenceError: document is not defined)
React noob in need of help here!
So, here's the sandbox (an example from the Framer Motion site) I'm trying to replicate in my Next.js App. The sample uses create-react-app, and I'm having a hard time ...
3
votes
2
answers
46
views
Reactjs routing composed routes
I'm having some difficulty with react routing and having trouble comprehending composed routes. I've attempted some code, but unfortunately, it's not functioning as expected. The "/" path ...
1
vote
2
answers
24
views
Ionic Router: Subpage is only loaded after refreshing the page
I have a list page, where all games from my games.json file are displayed.
This is what that looks like in GameListPage.tsx:
<IonList>
{gamesJson.map((game) => (
<IonItem
...
0
votes
0
answers
35
views
How do I validate a input (type file) and use it with action from react router 6.4+?
I would like to upload multiple files to a backend and am using react router's form element for that, and "action" to submit the files. I intend to show a preview for every file uploaded ...
1
vote
1
answer
35
views
Navigation when clicking on an svg (using react)
I have an SVG Map which I have setup like this (I will skip a lot of the map out as it's mostly fills and quite large)
import React from "react";
function Map() {
return (
<svg
...
2
votes
1
answer
30
views
How to hide the parent component data when going nested in the component?
I am learning React and trying to build a project which is a simple house listing website. Here I am navigating to the top menu "List Room" which is showing in the image and then when the ...
-1
votes
2
answers
37
views
Routing to a specific component
I have just started with the project (task management app) using ReactJS.
Page-1: Home Page
Here it will display the created tasks if any or else it should display "no tasks here"
It has two ...