React Child componentDidMount不在Route上触发

Question

我是React的新手，一直在寻找用无头WP后端构建我的第一个反应应用程序。

我无法让componentDidMount在我的MoviePage课程中触发。我希望有人能帮我理解我做错了什么。

这是我的代码，它可能不完美，因为这是我的第一次尝试。

注意代码现在已经改变了添加注释的建议 - 检查原始代码的编辑历史（它仍然被破坏）

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render((
        <BrowserRouter>
            <App />
        </BrowserRouter>
    ), 
    document.getElementById('root'));
registerServiceWorker();

App.js

import React from 'react';

import Header from './components/Header';
import Main from './components/Main';

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}

export default App;

Header.js

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

class Header extends React.Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }

  componentDidMount() {
    let dataURL = "http://localhost:8888/SBP/website/wp-json/wp/v2/movies?_embed";

    fetch(dataURL)
      .then(response => response.json())
      .then(response => {
        this.setState({
          movies: response
        })
      })
  }

  render() {
    let movieLinks = this.state.movies.map((movie, index) => {
      return <li key={index}><Link to={'/movies/'+movie.id}>{movie.title.rendered}</Link></li>
    });

    return (
      <header>
        <nav>
          <ul>
            <li><Link to='/movies'>All Movies</Link></li>
            {movieLinks}
          </ul>
        </nav>
      </header>
    )
  }  
}

export default Header;

Main.js

import React from 'react';
import { Route } from "react-router-dom";

import Movies from './Movies';

class Main extends React.Component {
  render() {
    return (
      <main>
        <Route path='/movies' component={Movies}/>
      </main>
    )
  }
}

export default Main;

Movies.js

import React from 'react';
import { Switch, Route, } from "react-router-dom";

import MoviesHub from './MoviesHub';
import MoviePage from './MoviePage';

class Movies extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path='/movies' component={MoviesHub}/>
        <Route path='/movies/:number' component={MoviePage}/>
      </Switch>
    )
  }
}

export default Movies;

MoviesHub.js

import React from 'react';

class MoviesHub extends React.Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }

  componentDidMount() {
    let dataURL = "http://localhost:8888/SBP/website/wp-json/wp/v2/movies?_embed";
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          movies: res
        })
      })
  }

  render() {
    let movies = this.state.movies.map((movie, index) => {
      return <div key={index}>
      <img src={movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url} alt={movie.title.rendered} />
      <p><strong>Title:</strong> {movie.title.rendered}</p>
      <p><strong>Release Year:</strong> {movie.acf.release_year}</p>
      <p><strong>Rating:</strong> {movie.acf.rating}</p>
      <div><strong>Description:</strong><div dangerouslySetInnerhtml={ {__html: movie.acf.description} } /></div>
      </div>
    });

    return (
      <div>
        <h2>Star Wars Movies</h2>
        {movies}
      </div>
    )
  }
}

export default MoviesHub;

MoviePage.js

import React from 'react';

class MoviePage extends React.Component {
  constructor() {
    super();
    this.state = {
      movie: []
    }
  }

  componentDidMount() {
    console.log('MoviePage componentDidMount');

    let dataURL = 'http://localhost:8888/SBP/website/wp-json/wp/v2/movies/'+this.props.match.params.number;

    fetch(dataURL)
      .then(results => {
        return results.json();
      })
      .then(data => {
        debugger;

        this.setState({
          movie: data
        })

        console.log("movie", this.state.movie);
      })
  }

  render() {
    let movie = this.state.movie;

    return <div>
        <img src={movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url} alt={movie.title.rendered} />
        <p><strong>Title:</strong> {movie.title.rendered}</p>
        <p><strong>Release Year:</strong> {movie.acf.release_year}</p>
        <p><strong>Rating:</strong> {movie.acf.rating}</p>
        <div><strong>Description:</strong><div dangerouslySetInnerHTML={ {__html: movie.acf.description} } /></div>
      </div>
  }
}

export default MoviePage;

作为参考，我正在从this tutorial建设，并试图将其提升到一个新的水平

任何帮助将不胜感激，并且任何关于如何改进我的代码以符合最佳实践的建议都会很棒。

谢谢大家。