In react-router-dom@6 the Route components don’t render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes. export default function WebRoutes() { return ( <Routes> <Route path=”https://stackoverflow.com/” element={<Welcome />} /> </Routes> ); } Ensure that you have rendered … Read more
You should have a <BrowserRouter> (or any of the provided routers) higher up in the tree. The reason for this is that the <BrowserRouter> provides a history context which is needed at the time the routes are created using useRoutes(). Note that higher up means that it can’t be in the <App> itself, but at … Read more
Try this approach import { useNavigate } from ‘react-router-dom’; function YourApp() { const navigate = useNavigate(); return ( <> <button onClick={() => navigate(-1)}>go back</button> </> ); }
This behaviour happens because have an exact attribute mentioned on the parent route <Route exact path=”https://stackoverflow.com/” component={Landing} /> So what happens is that react-router sees a path /test to match and then tries to match it starting from the top level. and it sees two routes one is exactly / and other is /contribute. None … Read more
From documentation (https://reactrouter.com/en/main/hooks/use-location), use this hook let location = useLocation(); React.useEffect(() => { ga(‘send’, ‘pageview’); }, [location]);
In react-router-dom v6, you need to use useNavigate rather than useHistory. See example from https://reacttraining.com/blog/react-router-v6-pre/ import React from ‘react’; import { useNavigate } from ‘react-router-dom’; function App() { let navigate = useNavigate(); let [error, setError] = React.useState(null); async function handleSubmit(event) { event.preventDefault(); let result = await submitForm(event.target); if (result.error) { setError(result.error); } else { navigate(‘success’); … Read more
Downgrade your “history” version or simply remove it because the correct version will be automatically added by “react-router-dom”. There is already an open issue about the same: https://github.com/ReactTraining/history/issues/804 Which says React Router (mainly history.push and Redirect) is not working properly with latest (v5) version of history. But it is working perfectly with v4 of history. … Read more
Issue The Route component API changed in react-router-dom@6. All routed content is now rendered on a single element prop as a ReactNode, a.k.a. JSX, not a reference to a React component. Solution Render the routed components as JSX, i.e. <Home /> instead of Home. import { BrowserRouter, Routes, Route } from “react-router-dom”; import ‘bootstrap/dist/css/bootstrap.min.css’; import … Read more
I solved this problem by changing: import {Route, Switch} from “react-router”; to import {Route, Switch} from “react-router-dom”; just add -dom.
The difference is between relative and absolute navigation. “/page2” with a leading slash “/” is an absolute path where “page2” is a relative path. If there was a nested route from the current location “page2″ would navigate relative to the current location. Relative Routes and Links If you are navigating from “page1” to “page2” these … Read more