使用带有webpack的React-Router中的嵌套路由发出问题

Question

I have done some googling, but to no avail on this issue. 我做了一些谷歌搜索，但在这个问题上无济于事。 Currently I have the following setup with React-Router 目前我使用React-Router进行了以下设置

Router.run(routes, Router.HistoryLocation, function(Handler) {
  React.render(<Handler />, document.getElementById('app'));
});


export default (
  <Route path="/" handler={App}>
    <Route path="" handler={Home} />
    <Route path="create-job" handler={CreateJob} />
    <Route path="jobs" handler={JobStatuses} />
    <Route path="job/:jobId" handler={Job} />
  </Route>
);

I also have the following webpack.config.js file. 我还有以下webpack.config.js文件。

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        path.resolve(__dirname, 'app', 'main.js')
    ],
    output: {
        path: path.join(__dirname, 'static'),
        publicPath: "static/",
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: path.join(__dirname, 'app'), loaders: ["react-hot", "babel?stage=0"] },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
        ]
    },
    plugins: [
        // Avoid publishing files when compilation failed
        new webpack.NoErrorsPlugin()
    ],
    stats: {
        // Nice colored output
        colors: true
    },
    devServer: {
        historyApiFallback: true,
        proxy: { "\/api\/*": "http://localhost:8888" }
    },
    // Create Sourcemaps for the bundle
    devtool: 'source-map'
};

index.html 的index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Project Hippo</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./static/bundle.js"></script>
  </body>
</html>

Now when I go to a url with the following for http:localhost:8080/job/0001 I get a 404 error for not being able to locate http:localhost:8080/job/static/bundle.js 现在，当我为http:localhost:8080/job/0001转到带有以下内容的URL时，由于无法找到http:localhost:8080/job/static/bundle.js我收到404错误

I feel that I am just missing something fairly simple. 我觉得我只是错过了一些相当简单的东西。

As a side not, this is entirely client side routing. 作为一方而言，这完全是客户端路由。

Answer 1

It will be nice to know your directory structure. 知道你的目录结构会很高兴。

From your webpack.config.js publicPath, your javascript files are being bundled into http://localhost:8080/static/bundle.js 从您的webpack.config.js publicPath，您的javascript文件被捆绑到http://localhost:8080/static/bundle.js

But you have set a relative path ( ./static/bundle.js ) in your index.html file. 但是您已在index.html文件中设置了相对路径（ ./static/bundle.js ）。

This is why when you visit http://localhost:8080/jobs/0001 your browser tries to look for your bundle.js in http://localhost:8080/jobs/static/bundle.js . 这就是为什么当您访问http://localhost:8080/jobs/0001您的浏览器会尝试在http://localhost:8080/jobs/static/bundle.js 。

So set your script source in your index.html to use an absolute path, ie 因此，在index.html中设置脚本源以使用绝对路径，即

<script src="/static/bundle.js"></script>

You should be fine. 你应该没事。

Answer 2

This is due to your publicPath being relative . 这是因为您的publicPath是相对的 。 Change your public path to be absolute like so: 将您的公共路径更改为绝对如此：

output: {
            path: path.join(__dirname, 'static'),
            publicPath: "/static/",
            filename: 'bundle.js'
},

使用带有webpack的React-Router中的嵌套路由发出问题

问题描述

2 个解决方案

解决方案1
10 2015-12-21 08:44:25

解决方案2
2 2018-01-23 18:00:35

使用带有webpack的React-Router中的嵌套路由发出问题

问题描述

2 个解决方案

解决方案1 10 2015-12-21 08:44:25

解决方案2 2 2018-01-23 18:00:35

解决方案1
10 2015-12-21 08:44:25

解决方案2
2 2018-01-23 18:00:35