Использование Webpack с React-router bundle.js не найдено

Я создаю проект с помощью Webpack и реагирую-rounter. это мой код:

ReactDOM.render(
    <Provider store={store}>
        <Router history={ browserHistory }>
            <Route path='/' component={ App } >
                <IndexRoute component={ Home } />
                <Route path="purchase" component={ Purchase } />
                <Route path="purchase/:id" component={ Purchase } />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('example')
);

Ответы

Ответ 1

Вы используете относительный путь для описания пути пакета bundle.js в вашем index.html.

Вы должны использовать абсолютный путь для bundle.js в вашем index.html

Абсолютный путь содержит корневой каталог и все другие подкаталоги, в которых содержится файл или папка.

Если он находится в том же пути с вашим index.html.

например.

public/index.html

public/bundle.js

Это решит вашу проблему.

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

Ответ 2

Добавление <base href="/" /> в заголовок тега моего файла index.html перед включением любых скриптов сработало для меня.

Ответ 3

Если вы используете HtmlWebpackPlugin редактирование напрямую index.html, это не вариант. Итак, чтобы исправить эту конкретную проблему, добавьте publicPath и укажите / в качестве корневой папки внутри webpack.config.js:

const path = require('path')

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  // more config stuff goes below..
}

Не забудьте перезапустить сервер разработки веб-пакетов, чтобы эти изменения вступили в силу