React Route не работает с вложенными URL

Question

Я пытаюсь использовать коммутатор, который маршрутизирует различные компоненты в зависимости от URL.Этот URl должен иметь возможность быть вложенным, например courses/:cid/assignments/:aid.

. Вот так выглядит мой коммутатор:

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

Приложение работает нормально: я могу получить доступ к домашней странице.Однако, когда я получаю доступ, например, к courses/1/assignments/20, я получаю следующую ошибку:

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

Я немного поиграл с путями, просто чтобы увидеть, где это пошло не так, и вот результаты:

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

У кого-нибудь есть идеи, что может быть не так?Что-то с моим веб-пакетом?Какие-то настройки мне не хватает?

Если требуется предоставить больше кода, сообщите мне, какие части моего приложения потребуются.

РЕДАКТИРОВАТЬ: Это мой 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`
};

Answer 1

То, что браузер пытается загрузить ваше bundle.js из http://localhost:8081/courses/1/assignmentsets/bundle.js, указывает, что bundle.js записывается как bundle.js вместо /bundle.js в атрибуте src тега script в вашем index.htmlфайл.

Чтобы исправить это, вы можете добавить publicPath в конфигурацию Webpack.

module.exports = {
  entry: APP_PATH,

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

  // ...
}

Answer 2

Похоже, у вас есть скрипт на сайте, например:

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

Измените его на (/ перед именем файла):

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