Не удается получить / песни / новые с маршрутизатором React + express

Question

Я пытаюсь использовать реакцию-роутер с express ... основной маршрут / отображается, но когда я пытаюсь перейти на другой путь, он не работает:.

Это мой server/server.js

const models = require('./models');
const expressGraphQL = require('express-graphql');
const path = require('path');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const schema = require('./schema/schema');

const app = express();

// Replace with your mongoLab URI
const MONGO_URI = 'mongodb+srv://x:X@cluster0-edarn.mongodb.net/test?retryWrites=true&w=majority\n';
if (!MONGO_URI) {
  throw new Error('You must provide a MongoLab URI');
}

mongoose.Promise = global.Promise;
mongoose.connect(MONGO_URI);
mongoose.connection
    .once('open', () => console.log('Connected to MongoLab instance.'))
    .on('error', error => console.log('Error connecting to MongoLab:', error));

app.use(bodyParser.json());
app.use('/graphql', expressGraphQL({
  schema,
  graphiql: true
}));

const webpackMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config.js');

app.use(webpackMiddleware(webpack(webpackConfig)));

module.exports = app;

Конфигурация Webpack:

module.exports = {
  entry: './client/index.js',
  output: {
    path: '/',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        use: ['style-loader', 'css-loader'],
        test: /\.css$/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'client/index.html'
    })
  ]
};

И это мой индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from "apollo-client";
import { ApolloProvider } from "react-apollo";
import SongCreate from "./components/SongCreate";
import {SongList} from "./components/SongList";
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AppContainer from "./containers/AppContainer";

const link = new HttpLink({
    uri: 'http://localhost:4000/graphql',
});

const client = new ApolloClient({
    cache: new InMemoryCache(),
    link,
});

const Root = () => {
  return (
      <ApolloProvider client={client}>
        <AppContainer>
          <Router>
            <Switch>
              <Route path="/" component={SongList} />
              <Route path="/songs/new" component={SongCreate} />
            </Switch>
          </Router>
        </AppContainer>
      </ApolloProvider>
  )
};

ReactDOM.render(
  <Root />,
  document.querySelector('#root')
);

Когда я перехожу на /songs/new я получаю Cannot GET /songs/new

я пытался добавить

app.get('*', function(req, res) {
  res.sendfile(path.resolve(__dirname, '../client', 'index.html'));
});

, и ошибка исчезла ... но ничего не отображается (похоже на связку. js не выполняется загружен)