0
450
Vistas¿Por qué los archivos JS externos agregados en el archivo html no funcionan cuando se usa react-router-dom?
Actualmente estoy trabajando en una aplicación de reacción y todo funcionaba bien hasta hace poco, cuando noté que todas las secuencias de comandos externas que definí en public/html ya no funcionan cuando renderizo páginas usando react-router-dom, pero funcionan bien cuando llamo al páginas directamente.
Esta es mi etiqueta de cuerpo de archivo html:
<body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script defer type="text/javascript" src="%PUBLIC_URL%/assets/js/plugins.bundle.js" ></script> <script defer type="text/javascript" src="%PUBLIC_URL%/assets/js/scripts.bundle.js" ></script> <script defer type="text/javascript" src="%PUBLIC_URL%/assets/js/intro.js" ></script> <script defer type="text/javascript" src="%PUBLIC_URL%/assets/js/widgets.js" ></script> <script defer type="text/javascript" src="%PUBLIC_URL%/assets/js/chat.js" ></script> <script defer type="text/javascript" src="%PUBLIC_URL%/assets/js/modals/create-app.js" ></script> </body>Todo funciona perfectamente si renderizo la página de esta manera:
const App = () => { return ( <UserDashboard/> ); }; export default App;Pero cuando se usa react-router-dom, no arroja ningún error pero nada funciona
return ( <BrowserRouter> <Routes> <Route path="/" element={<UserDashboard />/> <Route path="/login" element={<Login />} /> </Routes> </BrowserRouter> );Mi estructura de carpetas
¿Alguien sabe por qué sucede esto y cómo puedo solucionarlo? Porque estoy usando una plantilla y esos scripts son necesarios para que la plantilla funcione correctamente.
Estoy empezando a pensar que esto tiene que ver con la versión 6 de react-router-dom, porque no he encontrado este problema cuando trabajaba en proyectos anteriores. ¿Es lo único que puedo sospechar que degradar el react-router-dom sería una mala idea?
3 Respuestas
Responde la pregunta0
Las rutas del script son relativas a la ruta URL actual. Probablemente funcionen sin problemas si/cuando la aplicación se carga y usted está en la ruta raíz "/" , pero tiene problemas cuando está en cualquier subruta.
Especifique rutas absolutas en su directorio público en su lugar.
<script src="/assets/js/plugins.bundle.js"></script> <script src="/assets/js/scripts.bundle.js"></script> <script src="/assets/js/intro.js"></script> <script src="/assets/js/widgets.js"></script> <script src="/assets/js/chat.js"></script> <script src="/assets/js/modals/create-app.js"></script>0
Tuve un problema similar en el que necesitaba cargar scripts en etiquetas html en una aplicación creada a partir de la biblioteca create-react-app y descubrí que necesitaba ponerlos en el body , después de root y usar la palabra clave defer como se muestra a continuación:
<body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script defer type='text/javascript' src='%PUBLIC_URL%/ccapture/CCapture.js'></script> <script defer type='text/javascript' src='%PUBLIC_URL%/ccapture/gif.js'></script> <script defer type='text/javascript' src='%PUBLIC_URL%/ccapture/webm-writer-0.3.0.js'></script> <script defer type='text/javascript' src='%PUBLIC_URL%/ccapture/download.js'></script> No recuerdo si usar la variable %PUBLIC_URL% fue parte de la solución o simplemente la usé porque la plantilla era similar.
0
Tuve un problema similar. Estoy usando Electron con webpack y pude resolver esto agregando un protocolo de archivo personalizado para manejar solicitudes personalizadas de archivos estáticos. Agregado dentro del controlador de creación de ventanas. Esto puede ser de ayuda.
import { app, BrowserWindow, session } from 'electron'; //... session.defaultSession.protocol.registerFileProtocol('asset', (request, callback) => { const fileUrl = request.url.replace('asset://', ''); const filePath = path.join(app.getAppPath(), '.webpack/assets', fileUrl); callback(filePath); });