Question

我的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时，我得到一个404，因为它看起来像路由/家的SERVER-SIDE。

当然，如果我添加我的server.js：

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

调用http://localhost:1337/home返回正确的json对象。

我错过了什么？

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

在命名路线时，您不需要使用特定路径。作为约定，路由名称等于路径，除非您有意创建路径选项而不是名称。

如果这没有帮助，请在您的问题中添加更多信息。

使用react-router和HTMLWebpackPlugin表达状态404

1 个答案: