react-router-dom v6 Routes showing blank page

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=”” element={<Welcome />} /> </Routes> ); } Ensure that you have rendered … Read more

React Router 4 Nested Routes not rendering

This behaviour happens because have an exact attribute mentioned on the parent route <Route exact path=”” 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

using history with react-router-dom v6

In react-router-dom v6, you need to use useNavigate rather than useHistory. See example from 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(; if (result.error) { setError(result.error); } else { navigate(‘success’); … Read more

react app showing empty page when redirecting on production build

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: 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

React App goes blank after importing React-Router-Dom

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