装入组件时不加载导入的脚本-React JS

Question

I am working on a React JS application. I have three main Routes which are /login , /register and, /app . In the app component I have imported a swipe.js script that's only necessary for /app component and not for the rest. But when I run the app, it automatically loads the script on /login and /register as well, this is the first issue. The second issue is, when I login or register, then I wrote a script to get redirected to /app component and it is done successfully, but the as the swipe.js is already loaded, the events and functions from swipe.js doesn't work on /app . I don't know what is the problem.

Index.js Code

 import React from 'react'; import ReactDOM from 'react-dom'; //Styles import './Components/assets/css/bootstrap.css' //Scripts import 'bootstrap' //Components import App from './App'; import Register from './Components/register' import Login from './Components/login' //Routing import { Route, BrowserRouter as Router } from 'react-router-dom'; ReactDOM.render( <Router> <Route path={'/app'} component={App} /> <Route path={'/login'} component={Login} /> <Route path={'/register'} component={Register} /> </Router> , document.getElementById('root')); 

App.js - /app

 import React, {Component} from 'react'; //Scripts import 'bootstrap' import 'popper.js' //Custom Scripts import './Components/assets/js/swipe.min' // Components import Navigation from './Components/navigation' import SideBar from './Components/sidebar' import Chat from './Components/chat' import Compose from './Components/compose-modal' export class App extends Component { constructor(props) { super(props) this.state = { } } componentDidMount(){ console.log("App Component Mounted..."); } render() { return ( <div className="layout"> <Navigation /> <SideBar /> <Chat /> <Compose /> </div> ) } } export default App; 

Login & Register Components

 import React, { Component } from 'react' import './assets/css/bootstrap.css' import './scss/auth.scss' import AuthImage from './assets/img/chat-bg.jpg' import Profile from './assets/img/avatars/avatar-male-1.jpg' import { Link, Redirect } from 'react-router-dom'; import {app, Cookies} from '../Shared/Globals' export class register extends Component { constructor(props) { super(props) this.state = { fname:'', lname:'', email:'', pass:'', pass2:'', formValid : false, regFormBtn : 'Join Now', formError : { error : false, data : null }, registered : false } this.handleRegisterForm = this.handleRegisterForm.bind(this) this.registerUser = this.registerUser.bind(this) } handleRegisterForm(event){ this.setState({ [event.target.name]:event.target.value }) if(this.state.fname !== '' && this.state.lname !== '' && this.state.email !== '' && this.state.pass !== '' && this.state.pass2 !== '' ){ this.setState({ formValid : true }) } else{ this.setState({ formValid : false }) } } registerUser(event){ event.preventDefault(); if(this.state.formValid){ this.setState({ regFormBtn : 'Joining ...', formValid : false }) app.auth().createUserWithEmailAndPassword(this.state.email, this.state.pass) .then( res => { console.log(res); new Cookies().createCookie("uid", res.user.uid, '10 minutes'); this.setState({ regFormBtn : 'Success !' }) this.resetForm(); this.setState({ registered : true }) }) .catch( error =>{ console.log(error); this.setState({ formValid : true, regFormBtn : 'Try Again' }) let err = {...this.state} err.formError.error = true this.setState({ err }) switch(error.code){ case 'auth/email-already-in-use': case 'auth/weak-password': case 'auth/network-request-failed': { let err = {...this.state} err.formError.data = error.message this.setState({ err }) break; } default: } }) } else{ console.log("Form is invalid"); } } render() { let e = ''; if(this.state.formError.error){ e = <div className='error'>{this.state.formError.data}</div> } else{ e = '' } if(this.state.registered){ return <Redirect to='/app' /> } return ( <> <div className='container auth-row'> <div className='row'> <div className='col-6'> <div className='auth-img'> <img src={AuthImage} alt='auth' /> </div> </div> <div className='col-6' > <div className='auth'> <div className='auth-head'> Join Our Chat Community Now !</div> <div className='auth-form'> <form className='row' method='POST' onSubmit={this.registerUser}> <div className='col-12'> {e} </div> <div className='rcaInput col-6'> <input type='text' placeholder='First Name' name='fname' onChange={this.handleRegisterForm} /> </div> <div className='rcaInput col-6'> <input type='text' placeholder='Last Name' name='lname' onChange={this.handleRegisterForm} /> </div> <div className='rcaInput col-12'> <input type='email' placeholder='Email Address' name='email' onChange={this.handleRegisterForm} /> </div> <div className='rcaInput col-12'> <input type='Password' placeholder='Password' name='pass' onChange={this.handleRegisterForm} /> </div> <div className='rcaInput col-12'> <input type='Password' placeholder='Repeat Password' name='pass2' onChange={this.handleRegisterForm} /> </div> <div className='btn-space col-12'> <button className='rcaBtn' type='submit' disabled={!this.state.formValid}> {this.state.regFormBtn} </button> <div className='small-font' style={{paddingTop:'10px'}}> Already have an account ? <Link to={'/login'} > Login Now</Link> </div> </div> </form> </div> </div> </div> </div> </div> </> ) } } export default register 

Answer 1

In app.js file you can modify it slightly:

let swipe;

export class App extends Component {
  constructor(props) {
    super(props)

    this.state = { swipeLoaded: false };
  }

  componentDidMount() {
    swipe = require('./...swipe.js'); // require your swipe file here
    this.state = { swipeLoaded: true };
  }
}

To prevent other issues in your render (because setting state in CDM will cause a re-render) add this to the render():

if (!this.state.swipeLoaded) return null;