反应路由器嵌套，一旦有参数就打开新页面答案

【问题标题】：React router nested, open new page as soon as there are params反应路由器嵌套，一旦有参数就打开新页面
【发布时间】：2020-04-28 02:12:51
【问题描述】：

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

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

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

代码：索引.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'));

电影.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>
    );
};

【问题讨论】：

标签： reactjs typescript routing routes

【解决方案1】：

您需要将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>

【讨论】：

哇，谢谢！这解决了问题！它不适用于仅添加“精确”。通过将 /movies 移动到 /movies/:id 下方，它起作用了。即使您删除确切。如此精确甚至没有必要。

【解决方案2】：

精确添加到您的“电影”路线

here is answer

因为你的带有 movie/1 的子链接将匹配只是移动路线

【讨论】：

exact 没做，我不得不移动``` ``` 下面：``` ```