Рендеринг одного компонента в реагирует маршрутизатор с экспресс не работает

Question

Мой вопрос прост, но сложен. Я пытаюсь загрузить один компонент из нескольких компонентов на реагирующий маршрутизатор (V 4.xx). Но он не загружается. Предположим, у меня есть сообщения на маршруте 'localhost:3000/posts' и одна страница длясообщение будет 'localhost:3000/posts/102' или 'localhost:3000/posts/:id'. Но одна страница не загружается ..

Я использую реагировать, реагировать-маршрутизатор (v4.xx), редукс, экспресс

ТакДавайте взглянем на файл server.js:

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev.js';

const app = express();
const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler, {
    hot: true,
    publicPath: webpackConfig.output.publicPath,
    noInfo: true
}));
app.use(webpackHotMiddleware(compiler));
app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '/index.html'));
});
app.listen(3000, ()=> console.log('Running on localhost:3000')); 

, а также на часть Router на странице index.js:

import React from 'react';
    import { render } from 'react-dom';


    import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
    import { Provider } from 'react-redux';
    import Exchange from './Components/Exchange';
    import {Single} from './Components/Single';


    import store from './store';

    import Navbar from './Components/Navbar';
    import './Components/css/dark.css';
    import './Components/css/bootstrap.css';
    import './Components/css/style.sass';

    const app = (
        <Provider store={store}>
            <Router>
                <Navbar />
                <Switch>
                    <Route exact path="/" component={Exchange} />
                    <Route path="/exchange" component={Exchange} />
                    <Route path="/exchange/:id" component={Single} />
                </Switch>
            </Router>
        </Provider>
    )
    render(app, document.getElementById('app'));

    if(module.hot) {
        module.hot.accept();
    }

И файл single.js

import React, { Component } from 'react';

    export class Single extends Component {
        render() {
            return (
                <div>
                    <h1>Single page</h1>
                    <h1>Single page</h1>
                    <h1>Single page</h1>
                    <h1>Single page</h1>
                </div>
            );
        }
    }

Все остальное работает полностью и нормально. Но одна проблема заключается в том, что один компонент не загружается.И если я перезагрузить localhost:3000/posts/102 консоль показывает: main.js:1 Uncaught SyntaxError: Unexpected token <