I am not able to add the style in my app.js file. The div is not working inside the route. Is there any other way to add style inside the route?
<Routes>
<Route exact path="/" element={auth.token ? <Home > : < Login />} />
<Route exact path="/register" element={<Register />} />
<div style={{ marginBottom: "60px" }}>
<Route element={<PrivateRouter />}>
<Route exact path="/:page" element={<PageRender />} />
<Route exact path="/:page/:id" element={<PageRender/>} />
</Route>
</div>
</Routes>
Create a layout route that renders the div element and style and an Outlet component for the nested Route components to render their element prop into.
Example:
import { Outlet } from 'react-router-dom';
const Layout = () => (
<div style={{ marginBottom: "60px" }}>
<Outlet />
</div>
);
export default Layout;
...
import Layout from '../path/to/Layout';
...
<Routes>
<Route path="/" element={auth.token ? <Home /> : < Login />} />
<Route path="/register" element={<Register />} />
<Route element={<Layout />}>
<Route element={<PrivateRouter />}>
<Route path="/:page" element={<PageRender />} />
<Route path="/:page/:id" element={<PageRender />} />
</Route>
</Route>
</Routes>