1
最新のASP.NET 2.0反応SPAテンプレートを使用しています。このテンプレートは、コマンドdotnet new reactで作成されています。ホットモジュール交換（ブラウザのコード編集が自動的に更新されます）ですぐに使えます。反応ホットローダーの設定の手助けが必要
は、その後、私はトップレベルのアプリコンテナーを追加したい、このブログの記事で説明したように、アプリケーションの状態を保持するためにのAppと呼ば： react without redux article。シンプルにする必要がありますか？この記事では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);
});
}
が、ここで./routesファイルだこれは（テンプレートから）働いているコードです（私はこのファイルを変更していない）：
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 } />
);
}
}
ご意見やご提案があれば幸いです。