Datepicker not working on react router childs (until refresh) - jquery-ui

Question

I am facing a issue with the react router, where the child router has a component form with datepicker(semantic-ui-calender) and a default dropdown from semantic-ui.
Issue is : By entering to the child route these styles are not working, shows only default select option for dropdown and datepicker was just a input now. If i refresh the page those are working.
Here is the router section
<Route path="/examination" component={Examination}>
<IndexRoute component={Add_new_schedule}/>
<Route path="/examination/AddNewSchedule" component={Add_new_schedule} />
<Route path="/examination/AddExam" component={Add_exam} />
</Route>
Here is the Dropdown
<div className="exam_class_section">
<select className="ui dropdown">
<option value>Section</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
Here is the Datepicker (Semantic-UI-Calender) with date, time-from, time-to
<div className="exam_date_time_box">
<div id="exam_date" className="ui calendar">
<div className="ui left icon input">
<input
type="text"
placeholder="Examination Date" />
<i className="calendar icon" />
</div>
</div>
<div className="exam_time_box">
<div id="time_from" className="ui calendar">
<div className="ui input left icon">
<i className="time icon" />
<input type="text" placeholder="Time From" />
</div>
</div>
<div id="time_to" className="ui calendar">
<div className="ui input left icon">
<i className="time icon" />
<input type="text" placeholder="Time To" />
</div>
</div>
</div>
</div>
Thanks

Answer 1

I got solution for this problem.
The issue is because external js files will not load in react-router.
The Solution is load the external js file with loadjs library by importing into the specific component page where it is required
import loadjs from 'loadjs' and call inside componentWillMound() lifecycle method
componentWillMount() {
loadjs('/js/main.js');
},