CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
suraj prajapati
suraj prajapati

Reputation: 31

how to add styles inside nested routes react router

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>

Upvotes: 3

Views: 871

Answers (1)

Drew Reese
Drew Reese

Reputation: 202686

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>

Upvotes: 2

Related Questions