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

【问题标题】：How to load a JavaScript file with React Router 4?如何使用 React Router 4 加载 JavaScript 文件？
【发布时间】：2018-03-28 14:14:12
【问题描述】：

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

【问题讨论】：

你能分享你的 react-router 代码吗
你在哪里需要你的 autocomplete.js，我猜在 Header.js 上？我认为您需要以编程方式使用自动完成功能。在 Header 组件中，在 componentDidMount 上触发自动完成。
@ChrisR 谢谢，它工作得很好。如果您将其发布为答案，我会接受。
嗨，我也面临同样的问题。你是怎么解决的？我没有从答案中理解。请帮帮我
@SaurabhSharma 我编辑了我的问题以包含我采用的解决方案。

标签： javascript reactjs react-router-v4

【解决方案1】：

(摘自我上面的评论^)

在 Header 组件中，在 componentDidMount 上，您会触发自动完成功能，而不是让它在脚本加载时自行执行。

【讨论】：