Почему react router не перенаправляет из адресной строки, а только по ссылке в вёрстке?

Question

[sinneren]

Немного боли вначале: реакт я только изучаю и уже изматерился после каждого малейшего изменения, то новая версия и всё старое не поддерживается и вообще надо скачать react-router-dom, то вебпак отвалится, то еще что. Малейшее изменение и приходится гуглить в чём затык, а в уроках не говорят о версии,что ужасно неправильно ввиду тотальных изменениях которые происходят едва ли не ежедневно. Я уж молчу, что из урока в урок свой стиль, обёртка и сборка используется, под которые нереально перестраиваться каждый раз.

К сути: у меня стоит последняя нода, нпм, реак и роутер. Делаю я по уроку со скотча: https://scotch.io/tutorials/routing-react-apps-the...
serve работает, всё запускает в обычном виде, Watch ловит изменения.
Я добавил разных рыбных контент-компонентов:

class Car extends Component {
  render(){
    return (<h1>Cars page</h1>);
  }
}

Далее в рендере пишу роутер, обратите внимание,что тут уже не по уроку, т.к. не актуален, а с тем, что нагуглил:

<Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/car">Car</Link></li>
      </ul>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/car" component={Car}/>
    </div>
  </Router>

В чём соль: всё работает прекрасно, если перейти по данным ссылкам, однако же, если просто в адресной строке вбить адрес, то выйдет грустное Not found. Я много уже нагуглил пытаясь хоть просто заставить работать hello world из урока, но на это гугла и ума уже не хватает, в выдаче в основном как сделать страницу 404.

Comments

[sinneren]

Alex: ну может, но без понятия. serve 4.2.0
что касается команды запуска "serve": "serve ./public", но работает же с обычным. да и работает если на линк кликнуть,а если тот же адрес просто вбить, то всё, приехали.
конфиг вебпака вот:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {
  context: __dirname,
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        exclude: /node_modules/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};

module.exports = config;

[alex]

sinneren: ответ Lumore должен помочь

Answer 1

[Lumore]

В конфиге вебпака добавьте:

devServer: {
		historyApiFallback: true
	},

А в output:
publicPath: '/'

Comments

[Никита Гущин]

sinneren и не забудьте наваять простенький веб-сервер для продакшена

[sinneren]

Никита Гущин: строго говоря, это и оказалась в конце урока. По сути оно и решает проблему. Но вопросов больше чем ответов из-за роутера...