如何使用 React Router 4 加载 JavaScript 文件？

Question

我在 index.html

中有外部 JavaScript 个文件

<!DOCTYPE html>
<html>
<body>
 ...blah blah
  <div id='app'></div>
  <script src='bundle.js'></script>
  <script src="./assets/js/autocomplete.js"></script>
</body>
</html>

第一次加载页面时一切正常，但是当我使用 React Router 4 菜单链接导航时，除非我重新加载页面，否则 autocomplete.js 不会加载。

如何使用 RR 重新加载 autocomplete.js？或者其他方式。

我相信 onEnter 已被弃用，否则它会是

<Route onEnter={load autocomplete.js ??}/>

所以需要改用render

App.js

export default class App extends Component {

  constructor(props) {
    super(props);
  }

  render(){
    return (
      <div>
        <Header />
        <Route exact path='/' component={ Home }/>
        <Route path="/login" component={ Login }/>
        <Route path="/register" component={ Register }/>
        <Route path="/edit-profile" component={ EditProfile } />
        <Footer />
      </div>
    )
  }
}

Header.js

const Header = ()=>(
    <nav className="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
    <button className="navbar-toggler navbar-toggler-right" type="button" 
      data-toggle="collapse" data-target="#navbarCollapse" 
      aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
        </button>
        <Link to="/" className="navbar-brand">Bar</Link>
        <div className="collapse navbar-collapse" id="navbarCollapse">
            <ul className="navbar-nav mr-auto">
                <li className="nav-item active">
                    <Link className="nav-link" to="/login">Login</Link>
                </li>
        <li className="nav-item">
                    <Link className="nav-link" to="/register">Register</Link>
                </li>
                <li className="nav-item">
                    <Link to="/edit-profile" className="nav-link">Edit Profile</Link>
                </li>        
            </ul>

            <form className="form-inline mt-2 mt-md-0">
                <input className="form-control mr-sm-2" type="text"/>
                <button className="btn btn-search my-2 my-sm-0" type="submit">Search</button>
            </form>

        </div>
    </nav>
);

index.js

import App from './components/App';

ReactDOM.render(
<BrowserRouter>
  <Provider store={ store }>
    <App/>
    </Provider>
</BrowserRouter>, document.getElementById('app'));

编辑。我采用的解决方案：

在 componentDidMount 内部：

const script = document.createElement("script");

script.src = "/assets/js/autocomplete.js";

document.body.appendChild(script);

Answer 1

(摘自我上面的评论^)

在 Header 组件内，在 componentDidMount 触发自动完成，而不是让它在脚本加载时自行执行。

如何使用 React Router 4 加载 JavaScript 文件？

How to load a JavaScript file with React Router 4?

javascript

reactjs

react-router-v4