Stack Overflow
Stack Overflow

Questions tagged [react-router-dom]

Use this tag for questions regarding DOM use and bindings of React Router v4, v5, and v6.

Introduction

React Router DOM is a package that contains all the DOM bindings for React Router. That includes things such as HashRouter and BrowserRouter which are specific to DOM use for the browser.

Docs

Related tags

7372 questions
2
votes
2 answers

How do I pass a URL Param to a selector

I recive a url param from useParams. I want to pass it to a selector using mapStateToProps. collection.component.jsx import { useParams } from "react-router-dom"; import { connect } from "react-redux"; import { selectShopCollection } from…
herald jose
  • 53
  • 7
2
votes
2 answers

Nested Routes in React-Router-Dom Not Working

I have an App component which houses various routes. One of those routes renders a Dashboard component, like so: class App extends Component { render() { return (
Anthony M
  • 51
  • 1
  • 6
2
votes
1 answer

React Router not linking to page

Fairly new to react and trying to get the router to work for me. I'm pulling in data from a third party api using a simple form. When the data is retrieved I'd like to display it in a new route, and then ultimately have another route for each item…
RRhodes
  • 501
  • 6
  • 19
2
votes
1 answer

How to style an a element that redirects to react component?

App.js: import './App.css'; import logo from './images/logo.png'; import Home from './components/Home'; import About from './components/About'; import Calculators from './components/Calculators'; import Classes from './components/Classes'; import…
Itamar Cohen
  • 340
  • 4
  • 15
2
votes
2 answers

React router v. 5.3.0: route component doesn't display

There are three route components. Navbar is always visible and it works fine. The main page, Home, works too and I can click the link to Checkout, but on the Checkout page I can't see any text, images, or anything except the blank background (as…
hirat3
  • 23
  • 6
2
votes
1 answer

Error: Invariant failed: You should not use outside a even though my structure is good

I'm getting this error : Error: Invariant failed: You should not use outside a But what's driving me crazy is the fact that My "Switch" tag actually is surrounded by "BrowserRouter".. import {BrowserRouter, Route} from…
naspy971
  • 1,137
  • 2
  • 13
  • 31
2
votes
1 answer

Private route is not getting parameters with manual path

I have the following PrivateRoute.js code: export const PrivateRoute = ({ component: Component, roles, ...rest }) => { const { user } = useContext(AuthContext); // currentUser = {something: value, something: value, role: "admin" } const…
User1899289003
  • 850
  • 2
  • 21
  • 40
2
votes
2 answers

React-router-dom Render props isn't returning any component

I'm using react-router-dom version 6.0.2 here and the "Render" props isn't working, every time I got to the url mentioned in the Path of my Route tag it keeps throwing me this error - "Matched leaf route at location "/addRecipe" does not have an…
Red Cloud
  • 129
  • 3
  • 10
2
votes
1 answer

Pass props using (react-router-dom v6)

I am using a for components that require authentication (which works fine). Now I want to get the location before redirecting user to loginForm like this: import React from 'react' import auth from…
wrongman
  • 33
  • 1
  • 6
2
votes
1 answer

React Link async/await does not wait code block

Hey I am trying to make small application for React-router I am trying to send API request (I do not have backend thats why im using promises) When i click Link it is redirecting not waiting my async/await could you tell me what am i doing…
Neo
  • 467
  • 1
  • 3
  • 17
2
votes
1 answer

Facing issue with Custom Route with latest react-router-dom version 6

Recently, I am facing issue with Custom Route with latest react-router-dom version 6 in my code. I have created custom route for authorized if user is not login then it will redirect to sign in page. It was working with previous react router version…
James
  • 371
  • 3
  • 12
2
votes
1 answer

Why does it direct me back to login page even user is authenticated?

When I log in to the page and refresh the page it takes me back to the login page. What I want to happen is that when user is authenticated still it directs from login page to home page and not the other way around and that it stays on home page…
Jukka Koivu
  • 269
  • 4
  • 15
2
votes
1 answer

Props of path "/" is not rendering on site?

Output: [HMR] Waiting for update signal from WDS... index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return…
Anurag singh
  • 87
  • 1
  • 1
  • 6
2
votes
1 answer

Dynamic routing with react-roter-dom v6 problem

I am trying to link up a component by a button in another component. I tried this way. in app.js file }> } /> and in the portfolio…
Md Nasir Ahmed
  • 23
  • 1
  • 10
2
votes
2 answers

Invoke logout function when route changes

How can I logout user when the JWT accessToken expires? Right now I am using withRouter as a Higher order component(HOC) to check for route change, but it only works when the user clicks the back button of browser. I want to check for route changes…
Gourav Thakur
  • 231
  • 2
  • 3
  • 15
1 2 3
…
99 100