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

问题描述 投票:0回答:1

我在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 ??}/>

因此需要使用渲染

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);
javascript reactjs react-router-v4
1个回答
0
投票

摘自我上面的评论^

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

© www.soinside.com 2019 - 2024. All rights reserved.