Я прошел через много ответов, но все еще не смог сделать это
Это прекрасно работает, когда js включено в папку publi c, но это не работает при изменении маршрута
<script src="%PUBLIC_URL%/JS/jQuery-2.1.4.min.js"></script>
<script src="%PUBLIC_URL%/BOOTSTRAP-JS/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/JS/app.min.js"></script>
Я включил этот код в свой заголовочный файл, чтобы добавить файл extrenal js, и работает правильно, но каждый раз, когда добавляется скрипт изменения страницы. Я что-то упустил в функции loadScript.
export default class Header extends Component {
componentDidMount() {
var loadScript = function (src) {
var tag = document.createElement('script');
tag.type = "text/javascript";
tag.async = false;
tag.src = src;
var body = document.getElementsByTagName('body')[0];
body.appendChild(tag);
}
loadScript("/JS/jQuery-2.1.4.min.js");
loadScript("/BOOTSTRAP-JS/bootstrap.min.js");
loadScript("/JS/app.min.js");
}
render() {
return (
<header className="main-header">
<a href="#" className="logo">
<span className="logo-mini"><img src={ImageSmall} /></span>
<span className="logo-lg">
<img src={RelconImage} style={{ width: '170px', height: 60 }} />
</span>
</a>
<nav className="navbar navbar-static-top" role="navigation">
<img src={menuIcon} className="sidebar-toggle" data-toggle="offcanvas" role="button" style={{ width: '55px' }} />
<label style={{ color: 'white', paddingTop: '18px' }} />
<div className="navbar-custom-menu">
<ul className="nav navbar-nav">
<li className="dropdown user user-menu">
<a href="#" className="dropdown-toggle" data-toggle="dropdown"> <img src={userIcon} className="user-image" alt="User Image" />
<span className="hidden-xs" />
</a>
<ul className="dropdown-menu">
<li className="user-header"><img src={userIcon} className="img-circle" alt="User Image" />
<p>Relcon</p></li>
<li className="user-footer">
<div className="pull-right">
<a className="btn btn-info">SIGN OUT</a>
</div>
</li>
</ul>
</li>
<li><a href="#" data-toggle="control-sidebar"><img src={VendorLogo} style={{ width: '200px', height: '50px', marginTop: '-10px' }} /></a></li>
</ul>
</div>
</nav>
</header>
);
}
}
чтобы прекратить добавление Я использовал следующий код, но это не работает при изменении меню
componentDidMount() {
var loadScript = function (src, file_id) {
var scriptexist = document.getElementById(file_id);
if (!scriptexist) {
var tag = document.createElement('script');
tag.type = "text/javascript";
tag.async = false;
tag.src = src;
tag.id = file_id;
var body = document.getElementsByTagName('body')[0];
body.appendChild(tag);
}
}
loadScript("/JS/jQuery-2.1.4.min.js", 'jqjs');
loadScript("/BOOTSTRAP-JS/bootstrap.min.js", 'bootsjs');
loadScript("/JS/app.min.js", 'appjs');
}
это то, как оно добавляется к телу каждый раз изменения страницы
<script type="text/javascript" src="/JS/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="/BOOTSTRAP-JS/bootstrap.min.js"></script>
<script type="text/javascript" src="/JS/app.min.js"></script>
<script type="text/javascript" src="/JS/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="/BOOTSTRAP-JS/bootstrap.min.js"></script>
<script type="text/javascript" src="/JS/app.min.js"></script>
Это моя другая подстраница, и ComponentWillMountFunction находится на странице заголовка.
class dashboard extends Component {
render() {
return (
<div>
<Header />
<Sidebar />
<div className="content-wrapper">
<section className="content-header" />
<section className="content">
{/* Page Content Here */}
</section>
</div>
<Footer />
</div>
);
}
}
export { dashboard }
class transactions extends React.Component {
render() {
return (
<div>
<Header />
<Sidebar />
<div className="content-wrapper">
<section className="content-header" />
<section className="content">
This are transactions
</section>
</div>
<Footer />
</div>
);
}
}
export { transactions }
это мой файл приложения
import React from 'react';
import { history } from '../helpers';
import { login } from '../login';
import { dashboard } from '../dashboard';
import { transactions, inventorys } from '../reports';
import { Router, Route, Switch, Redirect } from 'react-router-dom';
class App extends React.Component {
render() {
return (
<Router history={history}>
<Switch>
<Route exact path="/" component={login} />
<Route path="/dashboard" component={dashboard} />
<Route path="/transaction" component={transactions} />
<Route path="/inventory" component={inventorys} />
<Redirect from="*" to="/" />
</Switch>
</Router>
);
}
}
export { App };