score:0

use it

import react from "react";
import { link,outlet  } from "react-router-dom";

import iconbutton from "../../components/iconbutton/iconbutton";

import addcardicon from "../../assets/img/add card.png";

const managecards = () => {
  return (
    <div classname="manage-cards">
      <div classname="manage-cards__buttons">
        <link to="add-card">
          <iconbutton
            icon={addcardicon}
            alttext="add card"
            icontext="add card"
          />
        </link>
      </div>

     <outlet />
    </div>
  );
};

export default managecards;

score:0

i wanted to render the add-card in a different page, the problem with outlet will cause it to render in the same page. so that's how i managed to fix the issue:

<routes>
  <route index element={<home />} />
  <route path="login" element={<login />} />
  <route path="signup" element={<signup />} />
  <route path="manage-cards">
    <route index element={<managecards />} />
    <route path="add-card" element={<h1>hello world</h1>} />
  </route>
  <route path="manage-code" element={<managecode />} />
</routes>

score:1

an <outlet> should be used in parent route elements to render their child route elements. this allows nested ui to show up when child routes are rendered. if the parent route matched exactly, it will render a child index route or nothing if there is no index route.

did you add outlet ?


Related Query

More Query from same tag