Server rendering with base url

[peter-dangelo]

hello - my app is based off the aspnetcore_spa yeoman generator (react with redux variety). i need to host this app under a base url, and am having an issue when reloading a deep link page. in my boot-client file i have this:

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

const history = syncHistoryWithStore(browserHistory, store);

and my routes file:

<Route path='/myapp' component={Layout} >
    <Route path="/" components={{body:AccountsPage}} />
    <Route path="/account" components={{body:ManageAccountPage}} />
</Route>

app works fine until i refresh from the /myapp/account url. this results in an error thrown from the boot-server file on this line:

if (!renderProps) {
    throw new Error(`The location '${ params.url }' doesn't match any route configured in react-router.`);
}

// output: The location '/myapp/account' doesn't match any route configured in react-router.

i'm not sure if this is a react-router issue? the odd thing is if i comment out that throw, everything seems to be working fine. if i hit a non-existent route, e.g. /myapp/bad, then react-router issues a warning that the location did not match any routes, and an empty page is returned. not a great UX. but having deep link refreshes is a must-have.

any help or advice would be greatly appreciated!
thanks

[MrCrimp]

Probably multiple ways of solving this.
I'm using relative paths for path hosing, have you tried that?
Remove the root path, and use relative route paths below.
e.g

<Route component={Layout} >
    <Route path="/" components={{body:AccountsPage}} />
    <Route path="account" components={{body:ManageAccountPage}} />
</Route>

[peter-dangelo]

if i remove the root path, then the initial load will give this error:

The location '/myapp' doesn't match any route configured in react-router. 

also deep link to /myapp/account will throw the same error.

one way i might be able to solve this is to include the baseUrl in all routes, e.g.

<Route component={Layout} >
    <Route path="/myapp" components={{body:AccountsPage}} />
    <Route path="/myapp/account" components={{body:ManageAccountPage}} />
</Route>

howerver, i'd prefer to not have to repeat the base url in every route.
thanks

[MrCrimp]

You dont need to include it in every route

Instead set
basepath = params.baseUrl

Then use relative routes.

If you look trough the closed issues you will find discussions on this setup.

#425 (comment)

[peter-dangelo]

where in boot-server should i set basepath = params.baseUrl?
thanks

[MrCrimp]

I'm thinking the reason renderProps throws is due to absolute route paths. I'm defining my routes as relative/ and not /absolute, and have not seen the problem you describe.

Could you try the combination of not starting your routes with a slash + setting basePath in boot-client from window.baseUrl

You can create the global from params in your boot-server

            .domainTasks
            .then(() => {
              resolve({
                html: renderToString(app),
                globals: {
                  initialReduxState: store.getState(),
                  baseUrl: params.baseUrl
                }
              });

Then set basepath if defined

const browserHistory = useRouterHistory(createHistory)({
    basename: window.baseUrl  // not sure if this should fallback with   || '/'  ?
});

[peter-dangelo]

if i remove the leading slash from my routes, react-router is not able to find the url, and will error:

Warning: [react-router] Location "/counter" did not match any routes

i've pushed a simple version of the example project to my repo:
https://github.com/peter-dangelo/aspnetspa

in my routes file (https://github.com/peter-dangelo/aspnetspa/blob/master/ClientApp/routes.tsx) i currently have two routes for counter, /counter and counter, which is working. but if i remove the /counter route i get the above mentioned error.

[SteveSandersonMS]

This is now implemented (as in, will work automatically) in the latest templates sources in the repo, and will take effect as of the next release, which will be part of the ASP.NET Core 2.0 release.