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;
CodePudding user response:
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 /> },
]);
CodePudding user response:
Did you add the BrowserRouter??
Which error is throwing the code?