Как обрабатывать вложенные маршруты реакции-маршрутизатора при работе с bundle.js с помощью Express?

Question

Я использую webpack-dev-server на стороне разработчика для своего приложения Reaction-Redux и для производства. Я объединяю все файлы JS в один bundle.js. Теперь я создал базовое экспресс-приложение и обслуживал bundle.js и index.html, используя следующий код.

server.js

app.use(express.static('app'));

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

Ниже приведен мой компонент React для маршрутов:

return (
        <div>
            <Router>
                <div>
                    <Header/>
                    <Route exact path="/" component={Home}/>
                    <Route path="/login" component={Login}/>
                    <Route path="/signup" component={Signup}/>
                    <Route path="/forgetPassword" component={ForgetPassword}/>
                    <Route path="/wallets" component={Wallets}/>
                    <Route path="/orders" component={Orders}/>
                    <Route path="/settings" component={Settings}/>
                    <Route path="/markets" component={MarketsList}/>
                    <Route path="/market/:marketPair" component={MarketDetail}/>
                    <Route path="/resetPassword/:token" component={ResetPassword}/>
                </div>
            </Router>
        </div>
    );

Проблема для вложенных маршрутов. Одноуровневые маршруты, такие как вход в систему и регистрация, работают нормально. Но такие маршруты, как / market /: marketPair и / resetPassword /: token, выдают следующую ошибку в консоли браузера:

bundle.js:1 Uncaught SyntaxError: Unexpected token <

При нажатии на bundle.js он показывает мой файл index.html.

Может кто-нибудь помочь?

Answer 1

Я вижу 2 потенциальных проблемы:

• Путь для bundle.js относительно
• Экспресс не знает о маршрутах

Я не уверен, как вы создаете файл index.html и обрабатывает ли он веб-пакет или нет, но:

Если bundle.js правильно загружен из маршрутов верхнего уровня /login, /signup и т. Д., Но не по таким маршрутам, как /resetPassword/:token, возможно, веб-страница пытается загрузить /resetPassword/bundle.js вместо /bundle.js.

Если это так, проверьте путь к ресурсу bundle.js в вашем index.html.

Answer 2

Это определенно проблема с webpack config.Убедитесь, что файл правильно упакован, и у вас есть выходная папка со всеми правильными файлами, которые ожидает ваш HTML div.Запуск веб-пакета может запустить пакет, если он не настроен в вашем package.json

Проверьте в файле конфигурации имя файла, идентификатор, который ожидает ваш div, и другое несоответствие в именах