How to do multiple routes in react

Question

I am creating a blog dashboard .In which a layout is their "content component" in which pages are routing. But I also did the routing part in the content component itself . but now I have to create more pages so it can be routed on app.js level. but when I am doing one more routing in the app level component the content level routing stops working .

function App() {
      return (
        <div >
          <Routes>
            <Route path="/login" element={<Login/>}/>
                <Route path="/" element={<Layout />}>
                </Route>
            </Routes>
        </div>
    
      );



Next page is... 


    const contant = () => {
return ( 
<div style={{height: "500px" }}>
    <Routes>
        <Route path="/" element={<DashBoard/>}/>
        <Route path="/all-post" element={<AllPost/>}/>
        <Route path="/new-post" element={<NewPost/>}/>
        <Route path="/all-media" element={<AllMedia/>}/>
        <Route path="/add-new-media" element={<AddNewMedia/>}/>
        <Route path="/comment" element={<Comment/>}/>
        <Route path="/all-user" element={<AllUser/>}/>
        <Route path="/add-new-user" element={<AddNewUser/>}/>
        <Route path="/analytics" element={<Analytics/>}/>
        <Route path="/slider" element={<Slider/>}/>
        <Route path="/ad-section" element={<AdSection/>}/>
        
       
    </Routes>
</div>