React router嵌套，有params就打开新页面

Question

目前正在使用 create-react-app 进行构建，我正在尝试获取动态路由。我有一个包含 3 个页面的网站：Accordion、Movies、MovieDetail。

Page Movie 是一个包含从 swapi 获取的电影列表的页面。目标是在您单击电影标题后立即打开一个新页面。新页面应该会为您提供有关所点击电影的更多信息。

问题： MovieDetail 页面将在 Movies 的同一页面上呈现信息。不在新页面上..

代码： Index.tsx

const routing = (
    <Router>
        <div>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/movies">Movies</Link>
                    </li>
                </ul>
            </nav>

            <Switch>
            <Route exact={true} path="/" component={App} />
            <Route path="/movies" component={Movies} />
            <Route exact={true} path="/movies/:id" component={MovieDetail} />
            <Route component={NotFound} />
            </Switch>
        </div>
    </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

Movies.tsx:

import React from 'react';
import { Route, useParams, Link, Switch } from 'react-router-dom';
import { useMovies } from './api/useMovies';
import { MovieDetail } from './MovieDetail';

export const Movies = () => {
    let { id } = useParams();
    const movies = useMovies();

    return (
        <div>
            <h1>Movies</h1>
            <h2>Selected movie: {id}</h2>
            <h2>Select a movie:</h2>
            {movies &&
                (
                    <ul>
                        {console.log(movies)}
                        {movies.results.map((movie, index) => {
                            return (
                                <li key={index}>
                                    <Link to={`/movies/${index + 1}`}>{movie.title}</Link>
                                </li>
                            );
                        })
                        }
                    </ul>
                )
            }
            <Switch>
                <Route path="/movies/:id" component={MovieDetail} />
            </Switch>
        </div>
    );
};

MovieDetail.tsx:

import React from 'react';

export const MovieDetail = () => {

    return (
            <h1>Movie Title</h1>
    );
};

Answer 1

将 exact 添加到您的 "Movie" 路线

因为您与 movie/1 的子链接将只匹配移动路线

Answer 2

您需要将 exact 添加到您的电影路线

<Switch>
    <Route exact={true} path="/" component={App} />
    <Route exact={true} path="/movies" component={Movies} />
    <Route exact={true} path="/movies/:id" component={MovieDetail} />
    <Route component={NotFound} />
</Switch>

或移动 /movies 路线更有意义

<Switch>
    <Route exact={true} path="/" component={App} />
    <Route exact={true} path="/movies/:id" component={MovieDetail} />
    <Route path="/movies" component={Movies} />
    <Route component={NotFound} />
</Switch>

React router嵌套，有params就打开新页面

React router nested, open new page as soon as there are params

reactjs

typescript

routing

routes