React Router Dom routes are returning blank pages

by

I assume you are using React Router Dom v6 since you are using Routes instead of Switch, in which case it should be element, not component, the propriety where you pass that component for that route. Also, call the component when passing it like so:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";

function App() {
  return (
    <Router>
      <Sidebar />
      <Routes>
        <Route path="/" exact element={<Dash />} />
        <Route path="/profile" exact element={<Prof />} />
      </Routes>
    </Router>
  );
}
export default App;

⚠️: notice it’s element={<Dash />} and not element={Dash}.

More Related Contents:

  1. Link tag inside BrowserRouter changes only the URL, but doesn’t render the component
  2. How to pass data from a page to another page using react router
  3. How do I render components with different layouts/elements using react-router-dom v6
  4. react router v6 navigate outside of components
  5. Problem in redirecting programmatically to a route in react router v6
  6. Error: [PrivateRoute] is not a component. All component children of must be a or
  7. React doesn’t reload component data on route param change or query change
  8. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  9. ReactJS – Pass props with Redirect component
  10. Multiple Nested Routes in react-router-dom v4
  11. How do you pass data when using the navigate function in react router v6
  12. how to listen for route change in react-router-dom v6
  13. ReactJS: [Home] is not a component. All component children of must be a or
  14. Error “Error: A is only ever to be used as the child of element”
  15. How to create a protected route with react-router-dom?
  16. react-router-dom v6 Routes showing blank page
  17. using history with react-router-dom v6
  18. React router dom: Route and Router not working at all
  19. React: ‘Redirect’ is not exported from ‘react-router-dom’
  20. How to properly use useHistory () from react-router-dom?
  21. How can I redirect in React Router v6?
  22. What is component in reactjs?
  23. React Context vs React Redux, when should I use each one? [closed]
  24. react-router getting this.props.location in child components
  25. React Function Components with hooks vs Class Components
  26. Can I execute a function after setState is finished updating?
  27. where is create-react-app webpack config and files?
  28. onEnter not called in React-Router
  29. how to set up an inline svg with webpack
  30. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb

Leave a Comment