Using baseUrl for react-router & code splitting #1210

New Issue

fergalmoran · 2025-08-09T17:19:16Z

fergalmoran commented

2025-08-09 17:19:16 +00:00

Originally created by @MrCrimp on 12/2/2016

Continuation of #425
First, great call to make baseUrl part of the default parameters.

For the react-redux template, to make use of baseUrl it's necessary to modify boot-client.ts a bit, you'll probably want

// instruct the router to ignore that part when resolving routes so they can be defined without taking baseUrl into account
const history = useRouterHistory(createHistory)({
     basename: baseUrl
   });

Those <LinkTo/> components should then work as expected

Now, for the webpack and public path when using code splitting.

The scenario is that you do e.g

function loadLocale(){
  require.ensure([], (require) => {
      const request: any = require( 'bundle-loader?lazy!react-intl/locale-data/' + locale );
     //.....

Given that webpack public path now is absolute path /dist/ and in your code you do a
call to loadLocale() then webpack will issue a request to
yourserver.com/dist/1.js no matter what, when what you really wanted was yourserver.com/vdir/dist/1.js

So I think it's necessary to prepend the newly introduced baseUrl when setting webpack.public path in aspnet-webpack code, instead of forcing it to absolute e.g /dist/

*Originally created by @MrCrimp on 12/2/2016* Continuation of #425 First, great call to make baseUrl part of the default parameters. For the react-redux template, to make use of baseUrl it's necessary to modify boot-client.ts a bit, you'll probably want ``` // instruct the router to ignore that part when resolving routes so they can be defined without taking baseUrl into account const history = useRouterHistory(createHistory)({ basename: baseUrl }); ``` Those `<LinkTo/>` components should then work as expected ------ Now, for the webpack and public path when using code splitting. The scenario is that you do e.g ``` function loadLocale(){ require.ensure([], (require) => { const request: any = require( 'bundle-loader?lazy!react-intl/locale-data/' + locale ); //..... ``` Given that webpack public path now is absolute path `/dist/` and in your code you do a call to `loadLocale()` then webpack will issue a request to `yourserver.com/dist/1.js` no matter what, when what you really wanted was `yourserver.com/vdir/dist/1.js` So I think it's necessary to prepend the newly introduced `baseUrl` when setting webpack.public path in aspnet-webpack code, instead of forcing it to absolute e.g `/dist/`

fergalmoran closed this issue

2025-08-09 17:19:17 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1210