私はreact.js（preactを使用）を初めて使用し、非同期ルーティング（preact-async-router）で問題に遭遇しました。
私のmain.js：
import { h, render } from 'preact';
import {Router, Route} from 'preact-router';
import AsyncRoute from 'preact-async-route';
import Home from './components/home.jsx';
/** @jsx h */
function getHelloWorld(){
return System.import('./components/hello.jsx').then(module => module.default);
}
render(
<Router>
<Route path="/" component={Home} />
<AsyncRoute path="/hello/:foo" component={getHelloWorld}
loading={()=>{alert("loading...");}} />
</Router>
, document.getElementById("app")
);
私のhome.jsx:
import {h, Component} from 'preact';
import {Link} from 'preact-router';
/** @jsx h */
export default class Home extends Component {
render() {
return <h1>
This is home page<br/>
<Link href='/hello/Earth'>Earth</Link>
</h1>;
}
}
私のhello.jsx：
import {h, render, Component} from 'preact';
/** @jsx h */
export default class Hello extends Component {
render() {
return <h1>Hello {this.props.matches.foo}!</h1>
}
}
Webpack は bundle.js と 1.bundle.js (hello.jsx 用) を作成します。
すべて私の resources-dir にあります (resource-dir は、express.static 経由で利用できます)。
home.jsx が読み込まれ、リンクが (localhost/hello/Earth) を指しています。
問題は、1.bundle.js がロードされていないことです! ブラウザ (bundle.js) は、「/resources/1.bundle.js」ではなく「/hello/1.bundle.js」の下のファイルを要求しています!
どうすれば修正できますか？
編集：
それは今動作します。「/resources/」を含む「publicPath」を webpack 構成に追加しました。ありがとうございました！
