Question 298808 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react nested children route is not working

import { createBrowserRouter } from "react-router-dom";
import Content from "../../Public/pages/Content/Content";
import { Home } from "@mui/icons-material";
const Route = createBrowserRouter([
    

    {
        path: "/",
        element: <Home></Home>, // working 
        children: [
            {
                path: "/",
                element: <Content /> children is not working
            }
        ]
    },

])

export default Route;

Content Should show on the page but it’s not working and it’s not showing any error

Tags:

2

Answers


  1. 0

    You are rendering the child with the same path, that’s not possible. How would React-Router know which route to render 😉

    You’ll need to add an unique path to the child, for example let’s make the url /content:

    const Route = createBrowserRouter([
    {
        path: "/",
        element: <Home></Home>,
        children: [
            {
                path: "content",
                element: <Content />
            }
        ]
    }
])

    For more information and examples, please check the createBrowserRouter() documentation.

    Login or Signup to reply.
  2. 0

    const Route = createBrowserRouter([
    {
    path: "/",
    element: ,
    children: [
    {
    path: "/content",
    element: , },
    ],
    },
    ]);

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search