News Articles react-router-dom

Is there a way to pass a function to component, accessed by useNavigate().navigate(/link_to_component)

Using react react-router-dom v.6 So, i’m using this construction to do routing in my app: Component1 const navigate = useNavigate(); //something happened navigate(‘/link_to_component2’, { state: { someVar: someVal} }); Component2 const {state} = useLocation(); const { someVar } = state; // Read values passed on state My problem is that I want to pass a […]

How to pass props through Link

Fairly new to react here. I’m making a small recipe finder app with an api. After getting the data, I’m mapping through the results and displaying them in a component. What I want to do is display the details of each recipe through another component in another route. I’m not sure how to do this. […]

Why navigate is not working properly via buttons?

I’m having a small issue this didn’t happen on previous updates of react-router-dom however I’m now using V6 and I don’t understand why this is happening cause it really does not make sense to me. So when I click on Home while being in another path it should take me to the HOME path right […]

The error message says browserRouter is not defined when using cdn in a html

I am trying to do this in a single html page. I first use unpkg.com to import the required things such as React and React-router-dom. If I use simple React staff, the page can load. Then I am trying to use React-router-dom, I add the script in the head tag and create a simple mydiv7. […]

React Router ComponentDidMount Not Executing

I need to have the componentDidMount method to fire when the Router mounts a component so that a timeout can be started. This timeout eventually sets the state so it can’t be initialized in any render lifecycles or the constructor. I tried changing the Route’s component={Home} to render={<Home>}, but then the error render is not […]

NavLink component in React-Router-DOM not accepting style prop with function

On the React Router Dom page for V5 (https://v5.reactrouter.com/web/api/NavLink/style-object-func) it states that the style prop will accept a function or an object. When I try to pass the style function listed in the docs I get the following console error: Failed prop type: Invalid prop style of type function supplied to NavLink, expected object I […]

react-router-dom does not display component

I’m trying to display my ‘Home’ component in my React project via react-router-dom. Thought I got your tone done right, I don’t have a compile time error but the Home component just doesn’t show up. Do you have an idea ? App.js : import Navbar from "./Components/Navbar"; import { BrowserRouter, Routes, Route } from "react-router-dom"; […]

Upgrade my react router dom v5 syntax to v6

export default class SingleRoom extends Component { constructor(props) { super(props); console.log(this.props); this.state = { slug: this.props.match.params.slug, defaultBcg: defaultBcg }; } componentDidMount() { console.log(this.props); } with this syntax, i was able to get many parameters that I could use with the help of router v5, with v6, when I console.log the props in v6 i don’t […]

How to return to the same scroll position when going back using useNavigate() or useLocation() react-router

When clicking on a specific pokemon, the user can show details of the pokemon. When the user clicks the back button to see all pokemon, I want them to continue in the exact same scroll position/pokemon, where they first clicked. How to achieve this? Here is the pokedex component, where the user can click on […]

Change router when user refreshes the page ( for example, clicking the refresh button or pressing F5 key ) — react-router-dom v6.0.2

guys! I need to do something that I couldn’t for the past days… So, I am creating a Github Profile Explorer App which uses Github API to return some data about Github users. I am using react-router-dom v6 to create routes to show, for example, the repositories of the user or his followers. The default […]

Can’t get react-router-dom to work (seeing blank page)

This is my App component that has 3 child components: Home, Contact and Procedures. I’m trying to make each child component into its own url route. However right now I’m just seeing a blank page FYI- I’m using [email protected] import {BrowserRouter, Routes, Route} from ‘react-router-dom’; import Home from ‘./Home.js’ import Contact from ‘./Contact.js’ import Procedures […]

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>. invariant [duplicate]

I am creating a react porject and i have this error with react-router(Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .) Someone can help me? import { BrowserRouter as Router, Route} from "react-router-dom" import Cadastro from "./pages/Cadastro/index.js" import Checkout from "./pages/Checkout/index.js" import […]

./src/App.js Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

I can’t figure it out why doesn’t work. I have uninstalled the react-router-dom package and reinstalled it, but I always have the same error. The error I’m getting: ./src/App.js Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’. This is my code. I hope that someone could give me a hand, Thanks in advance import […]

How I can check with react-router-dom 6.0.2 v

I used this code to check if the user sign in or not in react-router-dom 5.3.0v but this code doesn’t work with me in 6.0.2v, what instead of? <Route exact path="/" render={() => { return ( this.props.loading === true ? <Redirect to="/login" /> : <Redirect to="/home" /> ) }} /> Source: React – Stack Overflow

React Carousel Outlet/Render Issue – react-router-dom @v6

I am trying to use react carousel from this link https://brainhubeu.github.io/react-carousel/docs/examples/multipleSlides I create a CarouselComponent which intend to use for dashboard. But problem is: My carousel component not outlet in proper place while all other components working perfectly. Moreover, if I use the carousel component inside another (ex. dashboard) component then that component also not […]

How to fix error which appeared after upgrading to react-router v6

Before upgrading to v6 I had this part of code, which worked as it should: //before return ( <BrowserRouter> <Route render={(props) => ( <div className={`layout ${themeReducer.mode}`}> <Sidebar {…props}/> <div className="layout__content"> <TopNav/> <div className="layout__content-main"> <Switch> <Route path=’/’ exact component={Dashboard} /> <Route path=’/activity’ component={Activity} /> </Switch> </div> </div> </div> )}/> </BrowserRouter> ) After upgrading I only changed […]

React Router useHistory Hook matching wrong component page

Below is a snippet from my app.js cra file, where I am using react-router-dom to navigate to various pages, the problem is, for /payment route, entering the url to payment: localhost:3000/checkout returns payment page component instead, useHistory with onClick on the header component also does the same, no error is thrown, I have already gone […]

HashRouter redirect

I am using HashRouter (react router v6), For all not found page i am redirecting to defaultPath, i have a few cases and one of them dosnt work: http://localhost:3000/bla Going to http://localhost:3000/bla#/wellcome http://localhost:3000/#/bla Going to http://localhost:3000/#/wellcome http://localhost:3000/#bla Going to http://localhost:3000/#bla so i get nothing, is there a way to target this scenario when i enter […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.