Issue using nested routes in React-Router with webpack

Question

I have done some googling, but to no avail on this issue. Currently I have the following setup with 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.

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

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

I feel that I am just missing something fairly simple.

As a side not, this is entirely client side routing.

Cent · Accepted Answer · 2015-12-21 08:44:25Z

16

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

But you have set a relative path (./static/bundle.js) in your index.html file.

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.

So set your script source in your index.html to use an absolute path, i.e.

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

You should be fine.

answered Dec 21, 2015 at 8:44

Cent

8817 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fostah · Accepted Answer · 2018-01-23 18:00:35Z

5

This is due to your publicPath being relative. Change your public path to be absolute like so:

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

answered Jan 23, 2018 at 18:00

Fostah

2,9464 gold badges56 silver badges80 bronze badges

Collectives™ on Stack Overflow

Issue using nested routes in React-Router with webpack

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related