Reactjs React路由器精确匹配仅更新URL而不重新呈现DOM

我连接到一个API（电影数据库），它返回一个结果列表（电影），当我点击API的一个结果时，我需要看到一个详细页面。我已经设置了动态路由，但是当我单击详细信息页面时，我的URL会更改为类似：“”，其中2503是唯一的项目ID。但是，DOM不会重新呈现。当我使用相同的URL刷新时，我会被转发到正确的页面-但我需要在单击指向详细信息页面的链接时执行此操作

我在网上看到的所有问题都表明，您必须在路由中使用确切的关键字来解决此问题，但是我在除动态路由之外的所有路由中使用确切的关键字，并且仍然遇到DOM不重新渲染的问题

我的App.js文件如下：

import React from 'react';
import './App.css';
import Home from './components/Home';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import About from "./components/About.js"
import Discover from './components/Discover';
import Favourites from './components/Favourites';
import Rated from './components/Rated';
import Nav from './components/Nav';
import MovieDetails from './components/MovieDetails'

function App() {

  return (
    <Router>
      <div className="App">
        <Nav />
          <Switch>
            <Route path="/moviedetails/:id" component={MovieDetails}/>
            <Route path="/" exact component={Home} />
            <Route path="/about" exact component={About} />
            <Route path="/discover" exact component={Discover} />
            <Route path="/favourites" exact component={Favourites} />
            <Route path="/rated" exact component={Rated} />
          </Switch>
      </div>
    </Router>
  );
}

export default App;

从“React”导入React；
导入“/App.css”；
从“./components/Home”导入Home；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“/components/About.js”导入关于
从“./components/Discover”导入发现；
从“./components/Favorites”导入收藏夹；
从“./部件/额定值”进口的额定值；
从“./components/Nav”导入导航；
从“./components/MovieDetails”导入电影详细信息
函数App（）{
返回(
);
}
导出默认应用程序；

My MovieRow.js（包括详细信息页面的链接）如下所示：

import React from "react";
import { Link } from "react-router-dom";

class MovieRow extends React.Component {

  render() {
    return (
      <div>
        <table key={this.props.movie.id}>
          <tbody>
            <tr>
              <td>
                <img width="150" alt="poster" src={this.props.movie.poster_src} />
              </td>
              <td>
                <h3>{this.props.movie.title}</h3>
                <p>{this.props.movie.overview}</p>
                <Link to={`/moviedetails/${this.props.movie.id}`}>
                  View Movie Details
                </Link>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }

}

export default MovieRow;

从“React”导入React；
从“react router dom”导入{Link}；
类MovieRow扩展了React.Component{
render（）{
返回(
{this.props.movie.title}
{this.props.movie.overview}

查看电影详细信息
);
}
}
导出默认MovieRow；

My MovieDetails组件（单击链接到详细信息时返回）尚未连接到API，仅包含以下内容：

import React from "react";
import { Link } from "react-router-dom";

    class MovieDetails extends React.Component {

      render() {
        return (
          <div>
            movie details
          </div>
        );
      }

    }

    export default MovieDetails;

从“React”导入React；
从“react router dom”导入{Link}；
类MovieDetails扩展了React.Component{
render（）{
返回(
电影细节
);
}
}
导出默认电影详细信息；

你好，威廉欢迎来到StackOverflow社区：

如果您遇到任何类型的错误或其他问题，请检查您的控制台：

因为这个POC:可以很好地与以下组件配合使用

index.js
---------
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Rated from "../components/Rated";
import Home from "./Home";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/rated" exact component={Rated} />
      </Switch>
    </Router>
  );
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

index.js
---------
从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./部件/额定值”进口的额定值；
从“/Home”导入主页；
函数App（）{
返回(
);
}
导出默认应用程序；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

Home.js
-------
从“React”导入React；
从“react router”导入{withRouter}；
const Home=props=>{
返回(
props.history.push（“/rated”）}>GOTO rated
);
};
使用路由器导出默认值（主）；

---

Rated.jsx
---------
从“React”导入React；
额定常数=（）=>额定值；
出口违约率；

你好，威廉欢迎来到StackOverflow社区：

如果您遇到任何类型的错误或其他问题，请检查您的控制台：

因为这个POC:可以很好地与以下组件配合使用

index.js
---------
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Rated from "../components/Rated";
import Home from "./Home";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/rated" exact component={Rated} />
      </Switch>
    </Router>
  );
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

index.js
---------
从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./部件/额定值”进口的额定值；
从“/Home”导入主页；
函数App（）{
返回(
);
}
导出默认应用程序；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

Home.js
-------
从“React”导入React；
从“react router”导入{withRouter}；
const Home=props=>{
返回(
props.history.push（“/rated”）}>GOTO rated
);
};
使用路由器导出默认值（主）；

---

Rated.jsx
---------
从“React”导入React；
额定常数=（）=>额定值；
出口违约率；

组件是否正在加载？当你点击特定的电影时，我的意思是你是否能够看到电影细节组件你是否尝试过在动态路线上使用

exact

关键字？你能否创建一个最小的可复制代码沙盒，以便在组件加载时找到问题并给出解决方案？当你点击特定的电影时，我的意思是你是否能够看到电影细节组件你是否尝试过在动态路线上使用

exact

关键字？你是否可以创建一个最小的可复制代码沙盒，以便找到问题并给出解决方案

Rated.jsx
---------
import React from "react";

const Rated = () => <h1>Rated</h1>;
export default Rated;