Почему моя маршрутизация не работает, когда я загружаю свою производственную сборку webpack онлайн?

#reactjs #webpack #redux #react-router #react-redux

#reactjs #webpack #redux #react-router #реагировать-redux

Вопрос:

У меня есть этот веб-сайт, созданный с использованием React, и, конечно, я использовал React Router для маршрутизации, и он работает, когда я запускаю на localhost. Теперь, когда я создал свою производственную сборку и загрузил онлайн, переход по ссылке на en/signup , например, не сработал. Он показал страницу с ошибкой, которая не найдена. Итак, мне было интересно, что на самом деле пошло не так. Я не думаю, что это какая-либо проблема с объединением. Кстати, я использую Redux, React-Redux также в моем проекте.

TLDR: переход по URL, подобному en/signup , не работает в производственной сборке.

Надеюсь, вы, ребята, сможете мне с этим помочь. Спасибо.

1. для SPA серверу требуется другая конфигурация.. какой сервер вы используете?

2. я использую сервер веб-хостинга cpanel

3. Вам нужно будет настроить свой сервер, какой бы вы ни использовали, так, чтобы все запросы отправлялись на ваш index.html

Ответ №1:

Как выглядит ваша конфигурация webpack?

Попробуйте добавить это:

 var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'                        // <- this right here
  },
  module: {
    rules: [
      { test: /.(js)$/, use: 'babel-loader' },
      { test: /.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {                      // <-- and this object too
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

Я полагаю, что в настоящее время происходит то, что если вы перейдете непосредственно к URL-адресу, поскольку React (и React Router) еще не загружены, они не могут позаботиться о маршрутизации URL. Итак, браузер переходит к статическим ресурсам по адресу en/signup , и, конечно же, там ничего нет.

Итак, добавляя publicPath значение выше, вы указываете ему начать с отправки запросов root, а затем, когда все загружено, передается запрошенный URL.

Я не уверен, что именно это происходит за кулисами, но я думаю, что эффект правильный.

1. Я уже добавил эти атрибуты в конфигурацию webpack, но все еще не работает.

2. У меня возникли проблемы с моими маршрутами, и добавление как publicPath, так и конфигурации devServer заставило ее работать

Ответ №2:

После того, как я застрял на react-router на пару дней, я прочитал документацию в React Training. Затем я выполнил шаги быстрого запуска и изменил его, чтобы удовлетворить мои требования.

 import {
  HashRouter as Router,
  Route,
  } from 'react-router-dom';

  <Router>
    <div>
      <Header />
      <Route exact path="/" component={Content} />
      <Route path="/:country" component={SnaContent} />
      <Footer />
    </div>
  </Router>

На данный момент это устранило проблему. Надеюсь, это полезно для других, кто столкнулся с подобной проблемой.