仅与更新URL完全匹配，而不重新呈现DOM的反应路由器

Question

我已连接到API（电影数据库），该API将返回结果列表（电影），当我单击API的结果之一时，需要查看详细信息页面。我已经设置了动态路由，但是，当我单击详细信息页面时，我的URL变为类似“ http://localhost:3000/moviedetails/2503”，其中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;

我的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;

我的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;

Answer 1

Hi William，欢迎您到StackOverflow社区：

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

作为此POC：https://codesandbox.io/s/blissful-dust-nrcrj在以下组件中正常工作。

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);

---

Home.js
-------
import React from "react";
import { withRouter } from "react-router";

const Home = props => {
  return (
    <button onClick={() => props.history.push("/rated")}>GOTO RATED</button>
  );
};

export default withRouter(Home);

---

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

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