'Relative path to css and js files is incorrect when browser's url is changed

history.js

var createBrowserHistory = require('history/lib/createBrowserHistory');

var history = createBrowserHistory();

module.exports = history;

routes.js:

'use strict';
var React = require('react'),
    ReactRouter = require('react-router'),
    Router = ReactRouter.Router,
    Route = ReactRouter.Route,
    NotFoundRoute = ReactRouter.NotFoundRoute,
    IndexRoute = require('react-router').IndexRoute,
    history = require('./history.js'),
    App = require('./components/app.js'),
    SignupPage = require('./components/signupPage/signupPage.js'),
    SignupSuccessPage = require('./components/signupSuccessPage/signupSuccessPage.js'),
    NotFoundPage = require('./components/notFoundPage/notFoundPage.js');

var routes = (
  <Router history={history}>
    <Route path='/(:languageCode)' component={App} >
      <IndexRoute component={SignupPage} />
      <Route path='/success' component={SignupSuccessPage} />
      <Route path='*' component={NotFoundPage} />
    </Route>
  </Router>
);

module.exports = routes;

index.html:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>signup page</title>
    <link rel="stylesheet" href="css/bundle.css" />
    <script src="scripts/vendors.bundle.js" type="text/javascript" defer></script>
    <script src="scripts/bundle.js" type="text/javascript" defer></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Loading url : http://localhost:9005/en (works as expected)
Loading url: http://localhost:9005/fr (works as expected)

However loading url: http://localhost:9005/en/success (does NOT work as expected)

In google's developer console I see requests to files:

http://localhost:9005/en/css/bundle.css 
http://localhost:9005/en/scripts/vendors.bundle.js 
http://localhost:9005/en/scripts/vendors.vendor.js

However if you look at the index.html file above the urls should be

http://localhost:9005/css/bundle.css 
http://localhost:9005/scripts/vendors.bundle.js 
http://localhost:9005/scripts/vendors.vendor.js

I am not sure how /en/ is part of the urls for .css and .js files.

reactjs react-router

Solution 1:^[1]

I also faced the same issue. Actually when we are going to a route at 1 level deep in react-router-dom like:

localhost:3000/list

it works fine. When we go to a route containing more than one level like:

localhost:3000/list/business

It doesn't work and just concatenates the CSS relative path at the end of the pathname. Its a weird behaviour with react-router-dom.

But a workaround is to add prefix the pathnames with "%PUBLIC_URL%":

<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/style.css" />

Here style.css should be present in your public folder.

Solution 2:^[2]

The reason why your http://localhost:9005/en/success work as expected is because you defined your route path with the / in the beginning which means that you are declaring absolute path. If you remove that / you will get what you expect. See how the Route Matching works.

so your routes should look like:

var createBrowserHistory = require('history/lib/createBrowserHistory');
var history = createBrowserHistory();

var routes = (
  <Router history={history}>
    <Route path='/(:languageCode)' component={App}>
      <IndexRoute component={SignupPage} />
      <Route path='success' component={SignupSuccessPage} />
      <Route path='*' component={NotFoundPage} />
    </Route>
  </Router>
);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jeremy Caney
Solution 2

'Relative path to css and js files is incorrect when browser's url is changed

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]