需要帮助配置react热加载程序

Question

我使用的是最新的ASP.NET 2.0 react SPA模板，该模板是使用命令dotnet new react创建的它开箱即用，可以很好地替换热模块(代码编辑会自动在浏览器中更新)。

然后我想添加一个顶级的应用程序容器，名为app来保存应用程序状态，如本文所述：反应没有多余的文章。应该很简单，对吧？请注意，本文使用javascript，但我使用的是Typescript，因为模板就是这样设计的。但是在添加了一个简单的顶级容器组件并更新了热加载器配置之后，它就不起作用了。我得到一个错误，组件不知道如何重新加载自己。这是正在工作的代码(来自模板)：

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();
});
}

这是我更改后的代码，不起作用：

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);
});
}

供参考，以下是/路由文件(我没有更改此文件)：

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>;

这是我的新应用程序容器组件：

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 } />
);
}
}

任何想法或建议都将不胜感激！

Answer 1

我通过将boot.tsx文件恢复到原始模板版本，并将我的应用程序组件放在routes.tsx文件中，解决了这个问题。您可以看到，我刚刚将所有内容都封装在新的应用程序元素中。这是新的routes.tsx文件：

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>;

这是我修改后的应用程序组件，适用于这个版本：

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>
);
}
}