React路由器无法加载外部库

Question

我正在使用 create-react-app 来创建我的项目，之后我设置了两个组件：主页和文章，两者都是他们需要一个外部库来工作（https://code.getmdl.io/1.3.0/material.min.js）。

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

import Home from './home';
import Article from './article';

class Codelab extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/article/:id" component={Article} />
            <Route path="/" component={Home} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

我尝试直接在地址栏中输入网址：“/”或“/ article / 1”，一切都按预期工作。之后，我使用 react-router-dom 中的链接来允许用户只需点击图标即可转到文章页面。

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

class Home extends React.Component {
  render() {
    return (
       // a lot of unrelevant code here

       <Link to="/article/1"><p className="mdl-button">Take the course</p></Link>

       // a lot of unrelevant code here
    )
  }
}

出于某种原因，文章页面未加载 material.min.js 库，而且它的布局中断。

如果我重新加载该页面或通过输入url直接访问它，结果会有所不同。

更新：控制台中没有显示错误，此处我的文章组件：

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

class Article extends React.Component {
  // componentDidMount() {

  // }

  render() {
    return (
      <div className="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
        <header className="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
          <div className="mdl-layout__header-row">
            <span className="mdl-layout-title">Omena tutorial basic</span>
            <div className="mdl-layout-spacer"></div>
            <div className="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
              <label className="mdl-button mdl-js-button mdl-button--icon" htmlFor="search">
                <Link to="/"><i className="material-icons">arrow_forward</i></Link>
              </label>
              <div className="mdl-textfield__expandable-holder">
              </div>
            </div>
          </div>
        </header>
        <div className="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
          <header className="demo-drawer-header">
            <div className="demo-avatar-dropdown">
              <span>hello@example.com</span>
              <div className="mdl-layout-spacer"></div>
              <button id="accbtn" className="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
                <i className="material-icons" role="presentation">arrow_drop_down</i>
                <span className="visuallyhidden">Accounts</span>
              </button>
              <ul className="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" htmlFor="accbtn">
                <li className="mdl-menu__item">hello@example.com</li>
                <li className="mdl-menu__item">info@example.com</li>
                <li className="mdl-menu__item">
                  <i className="material-icons">add</i>Add another account...</li>
              </ul>
            </div>
          </header>
          <nav className="demo-navigation mdl-navigation mdl-color--blue-grey-800">
            <a className="mdl-navigation__link" >
              <i className="mdl-color-text--blue-grey-400 material-icons" role="presentation">forward</i>Step 1</a>
            <a className="mdl-navigation__link" >
              <i className="mdl-color-text--blue-grey-400 material-icons" role="presentation">forward</i>Step 2</a>
            <a className="mdl-navigation__link" >
              <i className="mdl-color-text--blue-grey-400 material-icons" role="presentation">forward</i>Step 3</a>
            <a className="mdl-navigation__link" >
              <i className="mdl-color-text--blue-grey-400 material-icons" role="presentation">forward</i>Step 4</a>
            <div className="mdl-layout-spacer"></div>
            <a className="mdl-navigation__link" >
              <i className="mdl-color-text--blue-grey-400 material-icons" role="presentation">assignment</i>Exercise 1</a>
            <a className="mdl-navigation__link" >
              <i className="mdl-color-text--blue-grey-400 material-icons" role="presentation">assignment</i>Exercise 2</a>
          </nav>
        </div>
        <main className="mdl-layout__content mdl-color--grey-100">
          <div className="mdl-grid demo-content">
            <div className="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
              <div className="mdl-card mdl-cell mdl-cell--12-col">
                <div className="mdl-card__supporting-text">
                  <h4>Step 1</h4>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque dolor et posuere tempus. Lorem ipsum dolor
              sit amet, consectetur adipiscing elit. Maecenas scelerisque dolor et posuere tempus. Lorem ipsum dolor sit
              amet, consectetur adipiscing elit. Maecenas scelerisque dolor et posuere tempus. Lorem ipsum dolor sit amet,
              consectetur adipiscing elit. Maecenas scelerisque dolor et posuere tempus.
              <br />
                  <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque dolor et posuere tempus. Lorem
              ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque dolor et posuere tempus. Lorem ipsum
              dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque dolor et posuere tempus. Lorem ipsum dolor
              sit amet, consectetur adipiscing elit. Maecenas scelerisque dolor et posuere tempus.
            </div>
                <div className="mdl-card__actions mdl-navigation">
                  <a className="mdl-button">Previous</a>
                  <div className="mdl-layout-spacer"></div>
                  <a className="mdl-button">Next</a>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    );
  }
}

export default Article;