How to make react router work with static assets, html5 mode, history API and nested routes?

前端未结

关注

 4  568

I thought I was starting to understand React Router, but I hit a new wall when adding a library that loads css for its components. Everything works fine when a navigate from

相关标签:

4条回答

臣服心动

2020-12-28 15:19
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
傲寒

2020-12-28 15:31

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2020-12-28 15:43
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: '/'
},
...
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
挽巷

2020-12-28 15:44
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
0 讨论(0)
发布评论:

提交评论
- 加载中...