React Router v6 Nested Routes doesn't work

Question

I want to render subroute with nested routes .

Expected results -> /bilgi/detay

I've tried like this but it doesn't return any page ..

<Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="bilgi"  element={<Information />} >
           <Route path='detay'  element={<Contact/>}/>
        </Route>
</Routes>

Answer 1

Nested Route components need an Outlet component to be rendered into.

Apply either of the following:

1. Have Information component render the Outlet for the nested routes to be rendered into. This renders the entirety of Information along with the content of the nested routes.

   import { Outlet } from 'react-router-dom';
   
   ...
   
   const Information = () => {
     ...
   
     return (
       <>
         ... Information JSX ...
         <Outlet /> // <-- nested routes render here
       </>
     );
   };
   

   ...

   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="bilgi" element={<Information />} >
       <Route path="detay" element={<Contact />} />
     </Route>
   </Routes>
   

2. Convert path="bilgi" into a layout route that renders the Outlet alone and move Information into its own nested index route to be rendered on the matching path of the layout route. Routes render an Outlet by default if no element prop is provided. This renders each routed component individually.

   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="bilgi">
       <Route index element={<Information />} />
       <Route path="detay" element={<Contact />} />
     </Route>
   </Routes>
   

Read more about index routes and layout routes.

You could OFC, not nest the routes at all and render a flat list of routes with absolute paths.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/bilgi" element={<Information />} />
  <Route path="/bilgi/detay" element={<Contact />} />
</Routes>

Answer 2

You can do like

<Routes>
    <Route path="/" exact element={<Home />} />
    <Route path="/bilgi" exact element={<Information />} />
    <Route path='/bilgi/detay' exact element={<Contact/>}/>
</Routes>