Как настроить сервер webpack dev с маршрутизатором react dom v4?

это код моей конфигурации webpack:

const compiler = webpack({
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')], 
  module: {
    loaders: [
      {
        exclude: /node_modules/, 
        test: /.js$/, 
        loader: 'babel',
      },
    ],
  },
  output: {filename: 'app.js', path: '/'}, 
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/', 
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true}, 
});

app.use('/', express.static(path.resolve(__dirname, 'public')));

отлично работает, приложение работает на localhost: 3000 / index.html, но когда я пытаюсь реализовать React Router dom v4. Это не работает. Это код:

const About = () => <div> <h1>About</h1> </div>

ReactDOM.render(
   <BrowserRouter>
      <div>
      <Route exact path='/' component={App}/>
      <Route  path='/about' component={About}/>
      </div>
    </BrowserRouter>,
  mountNode
);

это результат на localhost:3000/ build.min.js И на localhost:3000/об. Я получаю сообщение об ошибке: не удается получить / о. Не то, что я ожидал, почему бы это не сделать?

о

13
react-router react-router-v4 reactjs webpack webpack-dev-server

1 ответов

Я не думаю, что это имеет какое-либо отношение к webpack-config. здесь является базовым репозиторием github с использованием react-router-4.0. Я создал этот пример без каких-либо конкретных изменений, связанных с react-router-4.0 в конфигурации webpack.

добавьте "devServer" в конфигурацию webpack, если еще нет:

devServer: {
    historyApiFallback: true,
  }

два небольших предложения в вашем коде, попробуйте использовать "точный" с путем Для "о", т. е. 

<Route exact path='/about' component={About}/>

и, добавить скобки для const о т. е.

const About = () => (<div> <h1>About</h1> </div>);

надеюсь, это решает ваш запрос. Дайте мне знать, если вам понадобится какая-либо другая информация.

31