3

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>

1 Answer 1

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>
Sign up to request clarification or add additional context in comments.

14 Comments

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
@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.
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" />
@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?
can we connect in zoom I need a help
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.