React Router <Navigate>执行不需要的导航

Question

如果用户输入 /movies 路径，浏览器应重定向到 /movies/trending （这是有效的），我这里有这段代码。但是如果用户输入 /movies/popular，用户应该看到 MoviesPopular，但它仍然重定向到 /movies/流行趋势

 <Route
        path="movies"
        element={
          <div>
            <Navigate to="./trending" replace />
            <Outlet></Outlet>
          </div>
        }
      >
        <Route index path="trending" element={<MoviesTrending />} />
        <Route path="top_rated" element={<MoviesTopRated />} />
        <Route path="popular" element={<MoviesPopular />} />
      </Route>

Answer 1

movies

的路线包裹了其他路线，因此您必须将它们移出

movies Route

    <Route path="movies" element={
      <div>
        <Navigate to="./trending" replace />
        <Outlet></Outlet>
      </div>
    }
    ></Route>
    <Route index path="trending" element={<MoviesTrending />} />
    <Route path="top_rated" element={<MoviesTopRated />} />
    <Route path="popular" element={<MoviesPopular />} />