Category "react-router-dom"

React Router Dom v6 - Functions are not valid as a React child

Im trying to upgrade to v6 of react router dom. The application works but I cant seem to get the testcases to work. Before we had this wrapper for jest: const r

Error "Error: A <Route> is only ever to be used as the child of <Routes> element"

I am trying to use routing for the first time and followed the exact instructions from Udemy: File App.js: import { Route } from "react-router-dom"; import Welc

MUI Nav Tabs does not work with react-router

Here are the four components: App.js: import React from 'react'; import { Route, Switch } from 'react-router-dom'; import About from './About'; import Home from

How to get data from prop.location.state in react?

I try to send data through history push like that. And then I try to get the value of id that I send. The problem is when the first time rendering of compon

React Link doesn't refresh the page

I have this code: <Link to="/dashboard" style={{ color: '#A4A4A4' }}>Dashboard</Link> As part of my app, but if i'm currently viewing the /dashboa

React Router: How to stop redirecting until API returns a response?

I have a login page but that authenticates the login on router with a call to the backend. The backend returns a response 200 if the user is authenticated, and

React Router not working with Github Pages

If you go on my site, https://amodhakal.github.io/portfolio/, then you would realize that that the site is only showing the navbar, not the home page. It only s

react route component is not rendering anything

I created my app with create-react-app and tried to use react-router on it. but it's not working at all. I am using react-router-dom 5.3.0 version. But if I typ

react-router-dom Link on click close bootstrap modal window

I need to close the modal window by clicking on the link. My modal window: export const ModalWrapper = (props) => { const { children, title, modalName }

Difference between {Link} and {useNavigate} from 'react-router-dom'

Can anyone please explain the differences between {Link} and {useNavigate} from 'react-router-dom'? I am new to React and I see both {Link} and {useNavigate} ar

Hashrouter no slash with react-router-dom v6

I want to add a hash with no slash to my path, like: /#store/flowers/price but since I'm not using react-router-dom v5 anymore, the v6 does not let me work with

react-router-dom <Routes> and <BrowserRouter> errors

I am using react-router-dom and am facing an issue with using <Routes>: Here is my index.tsx file: import React from 'react'; import ReactDOM from 'react-

how to listen for route change in react-router-dom v6

am trying to migrate the old react router dom code to v6 and I want to know how to listen for route change, I am now using useHistory const history = useHistory

React useEffect is not triggering on route change

I expect that console.log('Refresh') runs every time the route changes (switching from Component1 to Component2). But it's only triggering on first render. Why?

How to change base url of create react app?

I'm using react-router-dom with create-react-app. Running scripts with yarn start, it starts with http://localhost:3000/(myprojectname), not http://localhost:30

React-Router v6 not rendering in production

I have run out of wisdom on this issue and hope for any ideas that could bring me on the right track. I have implemented a React.js SPA that uses react-router-d

Using react-router to switch between pages but my props aren't displaying, is this a router version issue?

I'm trying to render props with the code I have written however, only my header shows. My "about" page also displays properly. This is the warning message that

react router v6 navigate outside of components

In react-router v5 i created history object like this: import { createBrowserHistory } from "history"; export const history = createBrowserHistory(); And then

You cannot render a <Router> inside another <Router>. You should never have more than one in your app

import { BrowserRouter, Routes, Route } from "react-router-dom"; //Layouts import HomeLayoutRoute from "./components/layouts/HomeLayout"; //components import

Other Categories