0

私の webpack 構成は、提供される index.html をオンザフライで生成する HTMLWebpackPlugin を使用します。

plugins: [
  new HTMLWebpackPlugin({
    title: 'My App',
    favicon: path.join(__dirname, "../src/public/fav.ico")
  })
]

この生成された index.html を次のように公開しています。

app.use('/', express.static(__dirname));

クライアント側のreact-routerを使用しています。ルートは次のとおりです。

export default (
  <Route path="/" component={App}>
    <Route path="home" component={HomePage} />
  </Route>
)

http://localhost:1337/へのアクセスは正常に動作し、「アプリ」コンポーネントを適切に表示しますが、http://localhost:1337/homeにアクセスしようとすると、ルート /home が SERVER-SIDE に見えるため、404 が返されます。 .

もちろん、server.js に追加すると:

app.get('/home', function(req, res) {
  res.json({name: 'john'});
})

http://localhost:1337/homeを呼び出すと、適切な json オブジェクトが返されます。

何が欠けていますか？

4

1 に答える 1

-1

私は通常、大まかに次のような基本的なルートを実行しています。

let React = require('react');

let Router = require('react-router');
let DefaultRoute = Router.DefaultRoute();
let Route = Router.Route();


<Route name="app" path="/" handler={require("./components/App"}>
    <DefaultRoute handler={require("./components/HomePage"} />
    <Route name="anotherSite" handler={require("./components/anotherSite"} />
    <Route name="about-us" handler={require("./components/About"} />
</Route>

ルートに名前を付ける場合、特定のパスを使用する必要はありません。慣例として、名前とは別のパスで意図的にパス オプションを作成する場合を除いて、ルート名はパスと同じです。

それでも解決しない場合は、質問にさらに情報を追加してください。

于 2016-07-18T18:46:09.417 に答える