CODEWITHSUNDEEP
reactjswebpackreact-router
JW P
JW P

Reputation: 183

React Route does not work with nested URLs

I am trying to use a switch that routes different components depending on a URL. This URl should be able to be nested, like courses/:cid/assignments/:aid.

This is how my Switch looks like:

<Switch>
  <Route path='/courses/:cid/assignments/:aid' component={Assignment} />
  <Route exact path="/" component={Home} />
</Switch>

The app runs fine: I can access the home page. However, when I access for example courses/1/assignments/20, I get the following error:

Loading failed for the <script> with source “http://localhost:8081/courses/1/assignmentsets/bundle.js”.

I fiddled around a bit with the paths, just to see where it went wrong and these are the results:

<Switch>
  <Route path='/courses/:cid/assignments/:aid' component={Assignments} /> // Does not work
  <Route path="/courses/randomnestedurl" component={Assignments} /> // Does not work
  <Route path="/courses" component={Assignments} /> // Works fine
  <Route path="/:aid" component={Assignments} /> // Works fine
  <Route exact path="/" component={Home} /> // Works fine
</Switch>

Does anyone have an idea what could be wrong? Something with my webpack? Some setting I'm missing?

If more code needs to be provided, please let me know which parts of my application would be required.

EDIT: This is my webpack.config.js:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const APP_PATH = path.resolve(__dirname, 'src');

module.exports = {
  entry: APP_PATH,

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '/dist'),
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },

  module: {
    rules: [
      { test: /\.(ts|js)x?$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader'] },
    ],
  },

  devServer: {
    historyApiFallback: true,
    proxy: {
      '/api': {
          target: 'http://localhost:8080',
          secure: false
      }
  }
  },

  plugins: [
    new HtmlWebpackPlugin({ inject: true, template: path.join(APP_PATH, 'index.html') }),
    new ForkTsCheckerWebpackPlugin(),
  ]`enter code here`
};

Upvotes: 2

Views: 65

Answers (2)

Tholle
Tholle

Reputation: 112777

That the browser is trying to load your bundle.js from http://localhost:8081/courses/1/assignmentsets/bundle.js indicates that the bundle.js is written as bundle.js instead of /bundle.js in the src attribute of the script tag in your index.html file.

To fix this you could add a publicPath to your Webpack config.

module.exports = {
  entry: APP_PATH,

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '/dist'),
    publicPath: '/'
  },

  // ...
}

Upvotes: 1

Marvin Fischer
Marvin Fischer

Reputation: 2572

Looks like you have your script in the site like:

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

Edit it to be (/ before filename):

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

Upvotes: 1

Related Questions