Upon returning to a page in react, the script failed to load

Question

Upon returning to a page in react, the script failed to load

This is the code that I am currently using: The script is placed within the navbar and on the home page. The navbar script displays all the time, but the script on the home page does not load when navigating from one page to another.

import '../App.css';
import './hero.css'
import Hero_Img1 from '../images/blob-haikei (2).png'

function HeroSection() {

  

  return (
    <div className='hero-container'>
      <div className="hero_img_container">
      <img src={Hero_Img1} className="hero_img_left" alt="Hero img"/>
      </div>
      <h1>The White Dental</h1>
      <p>We Care For You</p>
     
 <script type='text/javascript' src='https://www.lybrate.com/***/****/****/em-wt.js'></script>
  <div className='lybrate-widget' name='dr-sandeep-kumar-jangra-dentist' tabs='ba,cp' btn-text=' Book Appointment '></div>
    </div>
  );
}

export default HeroSection;

javascript html css reactjs

Answer 1

Answer №1

If you need to dynamically load a script, you can achieve it in the following way:

useEffect(() => {
    loadScript('https://www.example.com/***/****/****/custom-script.js');
    loadScript('dynamic-script.js');
    loadScript('www.someotherwebsite.com/script.js');    
}, [])


const loadScript = (src) => {
    let script = document.createElement('script');
    script.src = src;    
    document.body.append(script);
}

Answer 2

If you need to dynamically load a script, you can achieve it in the following way:

useEffect(() => {
    loadScript('https://www.example.com/***/****/****/custom-script.js');
    loadScript('dynamic-script.js');
    loadScript('www.someotherwebsite.com/script.js');    
}, [])


const loadScript = (src) => {
    let script = document.createElement('script');
    script.src = src;    
    document.body.append(script);
}

Answer 3

Answer №2

If you want to incorporate external scripts into your React application, consider utilizing custom react hooks.

import { useEffect } from 'react';

const useExternalScript = url => {
  useEffect(() => {
        const script = document.createElement('script');
        script.src = url;
        script.async = false;
        document.body.appendChild(script);

// Remove the appended script when the component unmounts.
        return () => {
            document.body.removeChild(script);
        }
    }, [url]);
};

export default useExternalScript;


// Import and implement the hook in components as needed.
import useExternalScript from './useExternalScript';
import React from 'react';

function App() {
useExternalScript('path_to_script_file');
  return (
    <></>
  );
}

export default App;

Answer 4

If you want to incorporate external scripts into your React application, consider utilizing custom react hooks.

import { useEffect } from 'react';

const useExternalScript = url => {
  useEffect(() => {
        const script = document.createElement('script');
        script.src = url;
        script.async = false;
        document.body.appendChild(script);

// Remove the appended script when the component unmounts.
        return () => {
            document.body.removeChild(script);
        }
    }, [url]);
};

export default useExternalScript;


// Import and implement the hook in components as needed.
import useExternalScript from './useExternalScript';
import React from 'react';

function App() {
useExternalScript('path_to_script_file');
  return (
    <></>
  );
}

export default App;

Upon returning to a page in react, the script failed to load

Answer №1

Answer №2

Similar questions

Why am I encountering difficulties connecting to the Socket IO object in Node.js using Express?

Issues related to the performance of React, Redux, and three.js

Does React Fiber belong to the core of React, or is it considered as a distinct entity?

Encountering an error with $mdDialog.alert

In a JavaScript array of objects, the Vuetify select :items feature allows you to assign an id and name to each object. When a name is selected, the corresponding id is automatically

The CSS box's height should be determined dynamically

Enhance the functionality of a directive by incorporating the ui-mask directive

How can I transform area, city, state, and country into latitude and longitude using Google Maps API v3?

How can a groovy script help in extracting the Version Number using Parse()?

Storing a blob on the server?

Using ng-repeat to pass a parameter into a function triggered by ng-click

Is there a way to customize the design of an HTML scrollbar to resemble the one often seen on Google search engine result pages

What is the best way to remove an item from a mongoose schema and then update the document or schema?

The Select2 choices are not being updated correctly

SyntaxError: VM3419:1 - Unexpected token "<" was not caught

Adjusting the width of a div using CSS and HTML across different resolutions

A single pre-task to handle multiple tasks within the package.json file

Deactivate a button based on a comparison condition

Mastering GraphQL querying in React using TypeScript

Analyze React.js source code for errors, instead of focusing solely on the DOM manipulation aspect