React Router doesnt work when I try to render the components

March 2, 2022

I try to render the components with React Router, but it doesnt seem to work. I can’t find what I do wrong after the changes on React router.
I don’t get any errors. The components are just not rendering on the page.
I tried add BrowserRouter too, nothing changes.

My code

import './default.scss'
import { Routes ,Route  } from 'react-router-dom';
import MainLayout from './layouts/MainLayout';

import Homepage from './pages/Homepage';
import Registration from './pages/Homepage/Registration';

function App() {
  return (
    
      <Routes>
         <Route exact path="/" render={() => (
           <MainLayout>
             <Homepage/>
           </MainLayout>
         )}
          ></Route>
         <Route path="/registration" render={() => (
           <MainLayout>
             <Registration/>
           </MainLayout>
         )}
          ></Route>
         </Routes>
         
  );
}

export default App;

>Solution :

Guess your using react-route-dom v6, you can check out the guide upgrading from v5

Change route following

<Routes>
  <Route
    path="/"
    element={
      <MainLayout>
        <Homepage/>
      </MainLayout>
    }
  />
  <Route
    path="registration"
    element={
      <MainLayout>
        <Registration/>
      </MainLayout>
    }
  />
</Routes>

or using useRoutes

let element = useRoutes([
  // These are the same as the props you provide to <Route>
  {
    path: "/",
    element:
      <MainLayout>
        <Homepage/>
      </MainLayout> },
  {
    path: "registration",
    element:
      <MainLayout>
        <Registration/>
      </MainLayout>
  },
  // Not found routes work as you'd expect
  { path: "*", element: <NotFound /> },
]);