Маршрутизация на стороне клиента с реакции-маршрутизатором и ExpressJS работает только на один уровень

Question

Я пытаюсь использовать реактив-маршрутизатор, чтобы включить маршрутизацию на стороне клиента, но я могу только заставить маршрутизацию вести себя так, как ожидалось, на глубине прошлого "/".(то есть localhost: 8080 / работает, localhost: 8080 / {id} работает, но localhost: 8080 / голосования / {id} не работает)

Кроме того, я пытаюсь разработать локально, используя webpack-dev-server, и развернуть на heroku, используя webpack -p и сервер expressjs.На моем экспресс-сервере для всех маршрутов установлено значение по умолчанию index.html.

app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, './dist/index.html'));
});

При использовании npm start (экспресс-сервер) и я пытаюсь перейти на localhost: 8080 / voice / {id}, консоль говорит: SyntaxError: ожидаемое выражение, получено '<' </em>, означающее, что у меня есть ситуация, подобная этой проблеме .Однако при использовании webpack-dev-server в консоли появляется другая ошибка: Загрузка не удалась для источника с кодом «http://localhost:8080/vote/bundle.js”. Я считаю, что я вижу два разных выхода длята же самая основная проблема, различие заключается в моей среде или разнице в том, как express / webpack-dev-server обслуживает контент.

Вот мой полный сервер expressJS:

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;

app = express();
// the __dirname is the current directory from where the script is running
app.use('/', express.static(path.resolve(__dirname, 'dist')));

// send the user to index html page inspite of the url
app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, './dist/index.html'));
});

app.listen(port);
console.log("server started on port " + port);

Вот соответствующие части моего webpack.config.js:

output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/"
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        historyApiFallback: true
    }

А вот и мое приложение.JS с соответствующими маршрутами (Home, RealtimeView, PollVote являются пользовательскими компонентами React):

export default class App extends Component {
    render() {
        return (
            <BrowserRouter history={browserHistory}>
                <div>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/:id" component={RealtimeView} />
                    <Route exact path="/vote/:id" component={PollVote}/>
                </div>
            </BrowserRouter>
        );
    }
}

С этой конфигурацией я могу надежно заставить localhost: 8080 / работать и localhost: 8080 / {что угодно} для работы, но localhost: 8080 / voice / {id} или любой более сложный маршрут, чем localhost: 8080 / {что-то} завершается с ошибками, которые я упоминал ранее, в зависимости от того,Я использую webpack-dev-server или мой expressjs-сервер.

FWIW Я относительно новичок в webdev (мой опыт пока что это cluster-fck), и я не могу идти с полностьюизоморфное приложение, потому что мой бэкэнд в java / spring и я не переписываю весь бэкэнд.Я нашел этот пост полезным , но он не решил мою проблему.Пожалуйста, помогите, это сводит меня с ума.

Answer 1

Попробуйте установить резервный файл явно:

historyApiFallback:{
  index: 'index.html'
}