React Router Subroutes not showing

Question

I am using react-router-dom for routing within my application. I am having difficulty displaying subroutes. I have 2 routes, localhost:8080/ and localhost:8080/posts/new. The localhost:8080/ route works as intended. If I change the second route to be /posts such as localhost:8080/posts, then it will show without problem. I am utilizing the exact prop on the '/' route, and have set the following configuration within webpack devServer: {historyApiFallback: true}, however this does not solve the issue.

I am getting 2 errors in the console:

Error #1: GET http://localhost:8080/posts/bundle.js 404 (Not Found).

Error #2: Refused to execute script from 'http://localhost:8080/posts/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import reduxPromise from 'redux-promise';

import reducers from './reducers/index';
import PostsIndex from './components/posts-index';
import PostsNew from './components/posts-new';

const createStoreWithMiddleware = applyMiddleware(reduxPromise)(createStore);

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <Router>
        <Switch>
            <Route exact path="/" component={PostsIndex} />
            <Route path="/posts/new" component={PostsNew} />
        </Switch>
      </Router>
   </Provider>, document.querySelector('.container'));

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
            {
                exclude: /node_modules/,
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ],
    devServer: {
        historyApiFallback: true
    }
}

Any help is appreciated.

How are you loading the `bundle.js` in your HTML file? Make sure it is `/bundle.js` and not just `bundle.js` — Tholle, Jul 31 '18 at 02:39
I am using webpack-dev-server, so I am assuming that it does this by default. However, I inspected script element in the console and it is showing as simply bundle.js — Troy Leu, Jul 31 '18 at 02:48

score 1 · Accepted Answer · answered Jul 31 '18 at 03:36

HTMLWebpackPlugin prepends output.publicPath to all the assets it injects into the HTML file. If there is no publicPath, the JavaScript file will be injected as <script src="bundle.js"></script>. Because of this, bundle.js will be loaded relative to your current url, which is not what you want.

Set publicPath to / and it should work as expected.

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename:'bundle.js',
        publicPath: '/'
    },
    // ...
}

React Router Subroutes not showing

1 Answers1