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
?
Source: stackoverflow.com
Related Query
- Nested routes won't work using React Router 6
- React Router v4 nested routes not work with webpack-dev-server
- React router nested routes doesn't work
- React Router v6 Nested Routes doesn't work
- Using REACT ROUTER 4 nested Routes are coming blank
- Is it possible to create nested routes with multiple levels using react router dom
- react router - properly using links inside nested routes
- React router v6 nested routes can't go up one level using navigate
- Nested routes with react router v4 / v5
- How to make react router work with static assets, html5 mode, history API and nested routes?
- React router - Nested routes not working
- React Router v4 nested routes props.children
- React router Link not causing component to update within nested routes
- React Router v4 Nested Routes with Switch
- React Router v5.0 Nested Routes
- React Router doesn't load images properly with nested routes
- How to link to nested routes in React Router
- React router nested routes - How to redirect when no route is matching
- React router nested routes. Not rendering child routes
- React Router 6 alpha 4 nested routes
- Default component in nested routes in React Router
- Using images with webpack react wont work
- React router 4 how to nested routes /admin and /
- Nested Routes not rendering with React Router v4
- React Router v5 nested routes not found
- Using the same component for different Routes with React Router
- Nested routes in React Router v4 not rendering as expected
- React Router 4 Nested Routes not rendering
- How to get params in nested routes on react router dom v4?
- How can I exactly match routes nested deeply in react router 6?
More Query from same tag
- Reactjs, re-render same components, but different return data
- setState function in reactjs is not setting state. How to overcome this problem?
- Requesting a type when sending a property in a link
- How can I setstate before making function call in react?
- Creating graph with recharts with multiple data arrays
- How can I communicate between adjacent elements in ReactJS?
- Access-Control-Allow-Origin Problem in ReactJS
- How to retrieve ref from hoc translated component by i18next
- How to referesh a ReactJS application automatically
- Modal window with React and Redux
- Refactor small function using lodash/fp map, and a second argument
- React routing on conditional divs
- Merging/grouping objects in ReactJS
- How to ensure successful updating data before get them
- Percent in url next js
- ReactJS - Image is not shown in a custom column of Material-Table
- How to post date combined with hours with React JS?
- React: Data from API not displaying on page after first click
- clearInterval not clearing after setInterval parameter value is updated
- errorr in node:internal/modules/cjs/loader:488
- How do I get Flow to validate Web APIs in a React app?
- How can I display different error messages on my MUI input field?
- UseEffect does not load at the right time Reactjs
- Country code is not changing when number is given in React-Phone-Input 2
- Create page with single script file given to browser using react.js
- How to create a wrapper for an Apollo query that uses React hooks
- How do I update an array which is within an async function in a useEffect hook?
- Is it sane to use React `context` to access model mutators in a Flux-less app?
- Axios & Typescript give error from promise rejection a type
- Mocking an axios post using React Testing Library / Jest