Реактивная маршрутизация не обновится после того, как я добавлю пути к URL - PullRequest
0 голосов
/ 28 июня 2018

Я использую response v16 и response-router-dom v4, и у меня уже есть мои маршруты, работающие по большей части. Я использую webpack-dev-server для запуска своей среды разработки, и когда я обновляю или вручную набираю URL-адрес для приложения реакции, большую часть времени он будет работать нормально. Моя проблема в том, что когда я начинаю добавлять пути URL к маршрутам, обновление и ручная печать URL больше не будут работать.

Быстрый пример:

<Router>
    <Root>
      <Switch>
        <Route exact path='/' component={Welcome} />
        <Route path='/home' component={Home} />
        <Route path='/profile/:id' component={Profile} />
        <Route path='/profile/dashboard' component={Dashboard} />
        <Redirect to='/' />
      </Switch>
    </Root>
</Router>

В этом случае в настоящее время я могу перемещаться куда угодно, когда я начинаю с момента запуска приложения, обновление также работает для маршрутов "/ home" и "/". Единственная проблема с маршрутами с дополнительным путем. Если бы мне пришлось перейти к «/ profile / dashboard» и обновить, я получу кучу 404 ошибок, говорящих о том, что все статические ссылки не работают. Похоже, веб-пакет теперь перенаправляет в папку / profile /, которой там нет. Как я могу это исправить? Это проблема с настройкой реакции-маршрутизатора-домена или настройкой веб-пакета?

Вот мой конфиг веб-пакета для моей среды разработки. Я называю это с --history-api-fallback

module.exports = {
  devServer: {
    inline: true,
    contentBase: './',
      port: 4200
  },
  devtool: 'cheap-module-eval-source-map',
  entry: './index.js',
  mode: 'development',
  module: {
      loaders: [
          {
              test: /\.js$/,
              loaders: ['babel'],
              exclude: /node_modules/
          },
          {
              test: /\.scss/,
              loader: 'style-loader!css-loader!sass-loader'
          }
      ]
  },
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.min.js'
  },
  plugins: [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new HtmlWebpackPlugin({
        template: './index.html'
    })
  ]
};

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Я наконец нашел ответ, и он прост. Кредит должен перейти к ответу на другой вопрос, так как это, кажется, дубликат Вложенные маршруты

Я просто не мог легко его найти. После добавления <base href="/" /> в мой index.html проблема исчезла. Я должен был знать это, так как ресурсы пытались установить связь с чем-то другим, кроме корневой папки.

0 голосов
/ 28 июня 2018

Я не думаю, что вы сделали что-то не так - но я думаю, вам нужно настроить сервер для загрузки вашего файла index.html независимо от того, какой URL запрашивается.

Когда вы используете API истории, он на самом деле не достигает /profile/dashboard, но когда вы загружаете его прямо из адресной строки, он ищет /profile/dashboard на сервере (как я уверен, вы знаете из ваш вопрос).

Когда вы запускаете сервер webpack dev, вы просто звоните yarn run webpack-dev-derver --history-api-fallback? Если да, возможно, эта опция передается команде запуска пряжи, я думаю, что вы можете убедиться, что параметр --history-api-fallback применяется к команде, которая выполняется, запустив yarn run webpack-dev-derver -- --history-api-fallback

Вы можете изменить webpack-dev-server, включив в него также https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback, чтобы проверить, работает ли это.

Для производства, что-то вроде этого https://gist.github.com/RaVbaker/2254618 в htaccess может помочь, хотя я ничего не тестировал, так что я немного сомневаюсь, решит ли это вашу проблему.

...