javascript - preact 异步路由器找不到 block

Question

我对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)!

所有内容都在我的资源目录中(资源目录通过express.static可用)。

home.jsx 已加载，链接指向 (localhost/hello/Earth)。

现在的问题是 1.bundle.js 没有被加载!浏览器(bundle.js)正在请求“/hello/1.bundle.js”下的文件，而不是“/resources/1.bundle.js”下的文件!

我该如何解决这个问题？

编辑:

现在可以了。将“publicPath”和“/resources/”添加到我的 webpack 配置中。谢谢!

Answer 1

@Kian - 似乎您需要在 webpack 配置中将 output.publicPath 设置为“/”。