score:29

Accepted answer

It sounds like you have defined relative paths to your assets and icons in your CSS.

background-image: url('assets/image/myicon.png')

instead, try an absolute path:

background-image: url('/assets/image/myicon.png')

As React apps are single page applications, and you enter your app on /, all urls are going to work fine no matter the page you navigate to, since they are relative to the root where you started.

But as soon as you reload your page on a different path such as /customer/ABCD all your assets are going to be relative to that, hence the wrong url you see in your console.

Also, if using webpack, you can try to set your publicPath in your config file like this:

...
output: {
    path: 'assets',
    publicPath: '/'
},
...

score:0

I solved this by loading font awesome cdn on the app index page. Then it is available on all routes in all situations.

score:3

I solved this thanks to react-script:2+

You just have to create a js file called setupProxy.js, it will be loaded by the developement server. Now you have complete control over your proxy:

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    console.log("configuring development proxies to point to localhost:4000")
    app.use(proxy('/api', { target: 'http://localhost:4000/' }));
    app.use(proxy('/graphql', { target: 'http://localhost:4000/' }));
};

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually

Edit: The old link broke, this is an updated one: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

score:8

I hava a same problem.

  1. Add a <base href="http://whatever"> tag to the head of a page containing react-router's HTML using the default browserHistory

  2. Load the page - history.js will output 2 errors, Warning: Automatically setting basename using <base href> is deprecated and will be removed in the next major release. The semantics of are subtly different from basename. Please pass the basename explicitly in the options to createHistory

  3. Change the react-router history to use history where history is const history = useRouterHistory(createHistory)({ basename: 'http://whatever' }), which should fix the problem (as basename is now explicitly passed)

  4. Reload the page

https://github.com/reactjs/react-router/issues/3387

5/9 update

In my case.

index.html

<head>
  <base href="/" />
  <script src="app.js"></script>
</head>
<body>
  <div id="app">
  </div>
</body>

app.js

import { Router , useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const browserHistory = useRouterHistory(createHistory)({ basename: '/' })

render(
  <Router routes={routes} history={browserHistory}/>,
  document.getElementById("app")
);

And then reload the warning to disappears. hope this is useful.


Related Query

More Query from same tag