title: React Router V6 - Nested subpage routes not working
body: <p>I am trying to add subpages to the parent route. For some reason, I have tried to follow the documentation but it still showing the primary route component. Do I need to specify a special rule to display this subpage?</p>
  <p>How can I solve this? Am I missing something out?</p>
  <p>I am sharing my code file.</p>
  <p>Thanks in advance.</p>
  <p>This is my App.js:</p>
  <pre><code>import { Helmet } from &quot;react-helmet&quot;;
  import { BrowserRouter as Router, Routes, Route } from &quot;react-router-dom&quot;;
  import GoogleFontLoader from &quot;react-google-font-loader&quot;;
  
  // Styles
  import GlobalStyle from &quot;./styles/GlobalStyle&quot;;
  
  // Pages
  import NotFoundPage from &quot;./pages/404&quot;;
  import Home from &quot;./pages/Home&quot;;
  import About from &quot;./pages/About&quot;;
  import Blog from &quot;./pages/Blog&quot;;
  import Contact from &quot;./pages/Contact&quot;;
  import Dentist from &quot;./pages/Dentist&quot;;
  import Services from &quot;./pages/Services&quot;;
  
  // Dentist - services pages
  import OralSurgery from &quot;./pages/dentist/Oral-surgery&quot;;
  
  // Components
  import Navigation from &quot;./components/Navigation&quot;;
  
  const App = () =&gt; {
    const meta = {
      author: &quot;John doe&quot;,
      themeColor: &quot;#E6E6FA&quot;,
      description: &quot;Stomatološka ordinacija Stoma - Gradačac&quot;,
    };
  
    return (
      &lt;&gt;
        &lt;GoogleFontLoader
          fonts={[
            {
              font: &quot;Roboto Slab&quot;,
              weights: [400, &quot;400i&quot;],
            },
          ]}
          subsets={[&quot;cyrillic-ext&quot;, &quot;greek&quot;]}
        /&gt;
  
        &lt;GlobalStyle /&gt;
  
        &lt;Helmet defaultTitle=&quot;Stoma&quot;&gt;
          &lt;html lang=&quot;en&quot; /&gt;
          &lt;meta name=&quot;author&quot; content={meta.author} /&gt;
          &lt;meta name=&quot;description&quot; content={meta.description} /&gt;
          &lt;meta name=&quot;theme-color&quot; content={meta.themeColor} /&gt;
        &lt;/Helmet&gt;
  
        &lt;Router&gt;
          &lt;Navigation /&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
            &lt;Route path=&quot;about&quot; element={&lt;About /&gt;} /&gt;
            &lt;Route path=&quot;blog/*&quot; element={&lt;Blog /&gt;} /&gt;
            &lt;Route path=&quot;contact&quot; element={&lt;Contact /&gt;} /&gt;
            &lt;Route path=&quot;dentist&quot; element={&lt;Dentist /&gt;}&gt;
              &lt;Route path=&quot;oral-surgery&quot; element={&lt;OralSurgery /&gt;} /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;services&quot; element={&lt;Services /&gt;} /&gt;
            &lt;Route path=&quot;/*&quot; element={&lt;NotFoundPage /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/Router&gt;
      &lt;/&gt;
    );
  };
  
  export default App;
  </code></pre>