Nikulio
@Nikulio
NaN !== NaN

Почему при обновлении ломается React-router?

Всем привет
Решил новый проект сделать на собственном вебпаке и почему-то начал ломаться роутер при обновлении. То есть, по клике на Link он рендерит компонент, но если я обновлю страницу, то получаю Cannot GET /login
Вебпак:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    'react-hot-loader/patch',
    path.join(__dirname, 'client/index.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'client/index.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.json?$/,
        loader: 'json'
      },
      {
        test: /\.scss$/,
        loader: 'style!css!sass?modules&localIdentName=[name]---[local]---[hash:base64:5]'
      },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  }
};

Роутер :
index.js 
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById("root"));

App.js :
<Switch>
            <Route exact path='/' render={() => <div><Header/><Map/></div>}/>
            <Route exact path='/login' component={Login}/>
          </Switch>
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
@ilyapashkov02
Frontend Developer
попробуй в конфиг добавить:
devServer: {
    historyApiFallback: true,
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
YLab Тольятти
от 70 000 до 130 000 руб.
MFMS Москва
от 150 000 до 250 000 руб.