how to add styles inside nested routes react router

Question

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>

Drew Reese · Accepted Answer · 2022-08-12 22:05:50Z

2

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>

answered Aug 12, 2022 at 22:05

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

suraj prajapati Over a year ago

bro is there any other way to do like in previous we used to add the div inside the route like can we add style inside the route

Drew Reese Over a year ago

@surajprajapati No, not really. Route components can only render other Route components as children. The alternative is to render PageRender on "/:page/*" and it renders the styled div and another Routes component with descendent routes. In RRDv6 Route components can't just be rendered wherever you like, they can only be rendered by the Routes component or another Route component in the case of nested routes.

suraj prajapati Over a year ago

The link is not working I have imported the link from the react-router-dom. if I am doing the right click and copy that url and open it another tab then it's working but the click of that it's not working <Link to={${msg.url}} className="d-flex text-dark align-items-center"> <Avatar src={msg.user.avatar} size="big-avatar" />

Drew Reese Over a year ago

@surajprajapati What link are you referring to? There aren't any in the code snippet in this question. Is this a separate issue from the layout route?

suraj prajapati Over a year ago

can we connect in zoom I need a help

|

Collectives™ on Stack Overflow

how to add styles inside nested routes react router

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related