i am stuck in react router dom can anyone help me

Question

HOw my website looking before commit click to view

my App.js file

 <Routes>
      <Route path="/" element={<Navbar />}>
        <Route  path=""  element={<DeliveredComponents />} />
        <Route path="/blog" element={<Blog />} >
          <Route path="" element={<Allbogs />} />
          <Route path=":id" element={<Post />} />
        </Route>
        <Route path="*" element={<NoPage />} /> 
      </Route> 
 </Routes> 

DeliveredComponents file code

 <div className=  "container mt-3 text-center" >
            <div className="row">  
                <div className="col-sm-3">{<LeftSideBar />}</div>
                <div className=" col-sm-6   ">
                    <div className="container row">
                        <div >{<Puzzle/>}</div>            
                        <div> 
                            <Routes> 
                               <Route index element={<Home />} />
                               <Route  path='/' element={<Home />} />  
                               <Route path="/about" element={<About />} />
                               <Route path="/category" element={<Category />} />
                          
                            </Routes>
                       </div>
                   </div>
                </div>
                <div className="col-sm-3">{<RightSideBar/>} </div>
                       
            </div>
        </div>

I want to add a blog page to my website but I messed up

Before my websitePrevious

After adding blog routes Click this image

Can you find where I did a mistake

Answer 1

<Route path="/" element={<Navbar />}>

If the path is /, all that is rendered is <Navbar />, which seems about right for your screenshot.