React App goes blank after importing React-Router-Dom

by

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 Pending from './Pages/Home';
import Home from './Pages/Pending';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Pending" element={<Pending />} /> 
      </Routes>
    </BrowserRouter>
  );
}

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  5. How to pass params into link using React router v6?
  6. react-router-dom v6 useNavigate passing value to another component
  7. Detect Route Change with react-router
  8. Simple Conditional Routing in Reactjs
  9. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  10. Invariant failed: You should not use outside a
  11. useNavigate() may be used only in the context of a component
  12. React Router Dom v6 shows active for index as well as other subroutes
  13. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  14. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  15. react app showing empty page when redirecting on production build
  16. React Router 4 Nested Routes not rendering
  17. Children won’t render when using a layout in ReactJS
  18. How to go back to previous route in react-router-dom v6
  19. React Router V6 – Error: useRoutes() may be used only in the context of a component
  20. React doesn’t reload component data on route param change or query change
  21. What is the best way to redirect a page using React Router? [closed]
  22. React Router Pass Param to Component
  23. How to stop /#/ in browser with react-router?
  24. react-router-dom useParams() inside class component
  25. What is the alternative for Redirect in react-router-dom v 6.0.0?
  26. Page layout broken in React Router v6
  27. Automatic redirect after login with react-router
  28. React: ‘Redirect’ is not exported from ‘react-router-dom’
  29. React Router v4 with multiple layouts
  30. Passing values through React-Router v4

Leave a Comment