Why are External JS files added in html file not working when using react-router-dom
Question
I am currently working on a react application and everything was working fine until recently when I noticed that all the external scripts I defined in the public/html no longer works when rendering pages using react-router-dom, but works fine when I call the pages directly.
These is my html file body tag:
<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>
Everthing works perfectly if I render the page this way:
const App = () => {
return (
<UserDashboard/>
);
};
export default App;
But when using react-router-dom, it doesnt throw any errors but nothing works
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<UserDashboard />/>
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
My folder structure
Please does anyone know why this is happening and how can I fix it, cause I'm using a template and those scripts are necessary for the template to function properly.
I'm beginning to think this has to with react-router-dom version 6, cause I have not encountered this problem when working on previous projects. Its the only thing I can suspect would downgrading the react-router-dom be a bad idea?
3 answers
solution1
0 2022-03-31 14:15:20
I had a similar issue where I needed to load scripts in html tags in an app created from create-react-app library and found that I needed to put them in the body , afer root and use the defer keyword as below:
<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>
Can't remember if using the %PUBLIC_URL% variable was part of the solution or I just used it because the template had similar.
solution2
0 2022-03-31 15:57:27
The script paths are relative to the current URL path. They probably work without issue if/when the app loads and you are on the root "/" route, but have issue when on any sub-route.
Specify absolute paths in your public directory instead.
<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>
solution3
0 2022-04-06 04:17:27
I had a similar issue. I'm using Electron with webpack and was able to resolve this by adding a custom file protocol to handle custom requests for static files. Added within the window creation handler. This may be of help.
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);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.