Need help configuring react-hot-loader - reactjs

Question

I'm using the latest ASP.NET 2.0 react SPA template, which is created with the command dotnet new react. It works great out of the box, with hot module replacement (code edits update in browser automatically).
Then I wanted to add a top level app container, called App to hold application state, as described in this blog post:
react without redux article. Should be simple, right? Note that the article uses javascript, but I'm using Typescript, since that's how the template was designed. But after adding a simple top level container component and updating the hot loader config, it doesn't work. I get an error that the component doesn't know how to reload itself. This is the code that is working (from the template):
import './styles/site.scss';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { BrowserRouter } from 'react-router-dom';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing
// configuration and injects the app into a DOM element.
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
ReactDOM.render(
<AppContainer>
<BrowserRouter children={ routes } basename={ baseUrl } />
</AppContainer>,
document.getElementById('react-app')
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
And this is the code after my changes, that is NOT working:
import './styles/site.scss';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { BrowserRouter } from 'react-router-dom';
import * as RoutesModule from './routes';
import App from './components/App';
import * as AppModule from './components/App'
let routes = RoutesModule.routes;
const render = (Component: any) => {
// This code starts up the React app when it runs in a browser. It sets up the routing
// configuration and injects the app into a DOM element.
//const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('react-app')
);
}
render(App);
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./components/App', () => {
const nextRoot = (require('./components/App') as typeof AppModule).default;
render(nextRoot);
});
}
For reference, here's the ./routes file (I did not change this file):
import * as React from 'react';
import { Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
export const routes = <Layout>
<Route exact path='/' component={ Home } />
<Route path='/counter' component={ Counter } />
<Route path='/fetchdata' component={ FetchData } />
</Layout>;
And here's my new App container component:
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import * as RoutesModule from '../routes';
import { ReactElement } from "react";
let routes = RoutesModule.routes;
interface AppState {
stateDescription: string;
}
export default class App extends React.Component<{}, {}> {
constructor(props: any) {
super(props);
this.state = { stateDescription: 'My Cool App State' };
}
public render() {
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
return (
<BrowserRouter children = { routes } basename = { baseUrl } />
);
}
}
Any ideas or suggestions would be much appreciated!

Answer 1

I was able to resolve this by reverting my boot.tsx file to the original template version, and placing my App component in the routes.tsx file instead. You can see I just wrapped everything in the new App element. Here's the new routes.tsx file:
import * as React from 'react';
import { Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { App } from './components/App';
export const routes = <App>
<Layout>
<Route exact path='/' component={ Home } />
<Route path='/counter' component={ Counter } />
<Route path='/fetchdata' component={ FetchData } />
</Layout>
</App>;
And here's my modified App component that works with this version:
export class App extends React.Component<AppProps, {}> {
constructor(props: AppProps) {
super(props);
this.state = { stateDescription: 'My Cool App State' };
}
public render() {
return (
<div className='appContainer'>
{ this.props.children }
</div>
);
}
}