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

Question

我连接到一个API ( Movie DB)，该API返回一个结果(电影)列表，当我单击该API的一个结果时，我需要查看详细信息页面。我已经设置了动态路由，但是当我点击细节页面时，我的URL变成了类似'http://localhost:3000/moviedetails/2503‘的样子，其中2503是一个唯一的条目ID。当我使用相同的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组件(点击详情链接时返回)尚未连接到接口，仅包含以下内容：

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

嗨，威廉，欢迎来到StackOverflow社区：

如果您收到任何类型的错误或其他情况，请检查您的控制台：

因为这个概念：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;