title: React Router v6 Redirects
body: <p>thank you for taking the time to review this question in advance. I have experience with v5 but since changed pretty significantly in v6 I'm quite confused on how to setup a redirect within a nested page.</p>
  <p>For example my page structure is as follows:</p>
  <pre><code>- /auth
  - /client
    - dashboard
    - settings
      - profile
      - password
  </code></pre>
  <p>In my <code>/client</code> route i have a redirect set as follows (where <code>APP_URL = /client</code>:</p>
  <pre><code>&lt;Route path=&quot;/*&quot; element={&lt;Navigate to={`${APP_URL}/dashboard`} /&gt;} /&gt;
  </code></pre>
  <p>However, within my <code>/settings</code> route i would like to have it so that <code>/settings</code> redirects to <code>/settings/profile</code>. When setting a redirect within a nested route that also has a redirect it appears to cause an endless loop or redirect to the redirect set within the parent.</p>
  <p><strong>App.tsx</strong></p>
  <pre><code>function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Router&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;*&quot; element={&lt;Views /&gt;}/&gt;
          &lt;/Routes&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>Views</strong></p>
  <pre><code>export const Views = () =&gt; {
      return (
          &lt;Routes&gt;
              &lt;Route path=&quot;*&quot; element={&lt;Navigate to={APP_URL} /&gt;} /&gt;
              &lt;Route path={`${APP_URL}/*`} element={&lt;AppLayout /&gt;} /&gt;
          &lt;/Routes&gt;
      )
  }
  </code></pre>
  <p><strong>AppLayout</strong></p>
  <pre><code>export const AppLayout = () =&gt; {
      return (
          &lt;Content&gt;
              &lt;AppViews /&gt;
          &lt;/Content&gt;
      )
  }
  </code></pre>
  <p><strong>AppViews</strong></p>
  <pre><code>export const AppViews = () =&gt; {
      return (
          &lt;Routes&gt;
              &lt;Route
                  path=&quot;/*&quot;
                  element={&lt;Navigate to={`${APP_URL}/dashboard`} /&gt;}
              /&gt;
              &lt;Route path={`/dashboard`} element={&lt;Dashboard /&gt;} /&gt;
              &lt;Route path={`/settings/*`} element={&lt;Settings /&gt;} /&gt;
          &lt;/Routes&gt;
      )
  }
  </code></pre>
  <p><strong>Settings</strong></p>
  <pre><code>const Settings = () =&gt; {
      return (
          &lt;&gt;
              &lt;Routes&gt;
                  &lt;Route
                      path=&quot;/*&quot;
                      element={&lt;Navigate to={`${APP_URL}/settings/profile`} /&gt;}
                  /&gt;
                  &lt;Route path={`/profile`} element={&lt;Profile /&gt;} /&gt;
                  &lt;Route path={`/password`} element={&lt;Password /&gt;} /&gt;
              &lt;/Routes&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>Does anyone have any experience with this?</p>