title: React Router V6 nested Routes with i18n
body: <p>I have a question about React Router V6 nested with i18n.</p>
  <p>This is my first multi-language service.</p>
  <pre><code>const MainPage:React.FC = () =&gt; {
  
    const lang = i18n.language;
  
    return (
      &lt;&gt;
        &lt;Wrapper&gt;
          &lt;Routes&gt;
            {/* Main */}
            &lt;Route path={`/`} element={&lt;Home /&gt;}&gt;
              &lt;Route path={`${lang}`}&gt;
                &lt;Route path={`service`}&gt;
                  &lt;Route path={'slack'} element={&lt;Slack /&gt;} /&gt;
                &lt;/Route&gt;
              &lt;/Route&gt;
              {/* &lt;Route path={`service/dooray`}element={&lt;Dooray /&gt;} /&gt; */}
              {/* &lt;Route path={`contact`} element={&lt;Contact /&gt;} /&gt; */}
  
              {/* &lt;Route path={`app/sign-in`} element={&lt;SignIn /&gt;} /&gt; */}
              {/* &lt;Route path={`app/sign-up`} element={&lt;SignUp /&gt;} /&gt; */}
              {/* &lt;Route path={`app/mail-code`} element={&lt;MailCode /&gt;} /&gt; */}
              {/* &lt;Route path={`app/password/reset`} element={&lt;PwdReset /&gt;} /&gt; */}
  
              {/* &lt;Route path={`policies/privac`} element={&lt;Privacy /&gt;} /&gt; */}
              {/* &lt;Route path={`policies/terms`} element={&lt;Terms /&gt;} /&gt; */}
            &lt;/Route&gt;
            {/* &lt;Route path={`*`} element={&lt;&gt;NOT FOUND&lt;/&gt;} /&gt; */}
            {/* test */}
          &lt;/Routes&gt;
        &lt;/Wrapper&gt;
        &lt;ParentModal /&gt;
      &lt;/&gt;
  </code></pre>
  <p>If I enter localhost:3000/en, there is an error <code>'This means it will render an &lt;Outlet /&gt; with a null value by default resulting in an &quot;empty&quot; page.'</code></p>
  <p>How can I fix it..</p>
  <p>I want /en =&gt; go to english page, /jp =&gt; go to japanese page</p>
  <hr />
  <pre><code>const MainPage:React.FC =() =&gt; {
  
  ...
  
  &lt;Route path={`/`} element={&lt;Home /&gt;}&gt;
      &lt;Route path={`/${lang}/*`}&gt;
         &lt;Route path={`service`}&gt;
             &lt;Route path=&quot;slack&quot; element={&lt;Slack /&gt;} /&gt;
         &lt;/Route&gt;
      &lt;/Route&gt;
  &lt;/Route&gt;
  }
  </code></pre>
  <pre><code>const Home:React.FC = () =&gt; {
  
   return (
   &lt;&gt;
     ... UI, JSX
     &lt;Outlet /&gt;
   &lt;/&gt;
   )
  }
  </code></pre>
  <p>I add a <code>&lt;Outlet /&gt;</code>. But if I entered '/ko/service/slack', render <code>&lt;Home /&gt;</code> now</p>
  <hr />
  <pre><code>&lt;Route path={`/`} element={&lt;Home /&gt;}&gt;
      &lt;Route path=&quot;service&quot;&gt;
         &lt;Route path=&quot;slack&quot; element={&lt;Slack /&gt;} /&gt;
         &lt;Route path=&quot;dooray&quot; element={&lt;Dooray /&gt;} /&gt;
      &lt;/Route&gt;
  &lt;/Route&gt;
  
  </code></pre>
  <p>nested-routes doesn't work.. :(</p>