Как решить проблему перезагрузки страницы react-router?

Question

[symblight]

Переход по ссылкам осуществляется благополучно, но стоит перезагрузить страницу или же перейти напрямую по ссылке, как приходит 404
Использую react-router-dom
А на сервере обращаюсь таким образом:
app.js

Import api from './api.js'

app.use(webpackDevMiddleware(compiler,{
    stats:{
        historyApiFallback: true,
        colors:true
    }
}));
app.use(webpackHotMiddleware(compiler));
app.use('/',api);
app.use('/*', express.static(__dirname+ '/'));

const server = app.listen(8080,()=>{
    console.log(`server up ${config.serverPort}`)
})

api.js - Хранятся запросы.
Как настроить Router?

Answer 1

[SergeyBugai]

Думаю что проблема в
app.use('/*', express.static(__dirname+ '/'));

В каком виде у вас адреса в браузере, через /#/ или просто / ?

Comments

[symblight]

Просто /. Может еще что-то я забыл использовать в react-router-dom? Все такие это 4 версия уже, в документации не могу понять.

[SergeyBugai]

symblight: у вас только один роут на беке обрабатывает страницы app.use('/',api); попробуйте зделать app.use('/*',api); а express.static вывести за пределы роутера

[SergeyBugai]

Грубо говоря, если у вас роуты ишли бы через /#/ тогда все бы работало отлично, так как запрос на сервер за страницей всегда ишел бы как / на который у вас стоит обработчик. Но у вас html5Mode который кидает запрос так как есть, то есть, если /home то и на сервер уйдет /home который словит обработчик для статики, а так как статики с таким именем быстрее всего нету, возвращается 404, Да и сам express.static не нужно сунуть в роутер, если вам нужен именно путь к нему, то используйте express.static('/*', __dirname+ '/') как то так, если не ошибаюсь

[symblight]

SergeyBugai: Через /#/ работает, а на пальцах можете объяснить почему так работает?

[SergeyBugai]

symblight: могу)
Допустим вы перегрузили страницу под роутом localhost:3000/home то на сервер у вас уйдет запрос GET /home, а если html5mode отключен, тоесть урлы идут через /#/ то на сервер уходит всегда GET / , в таком случае, для отдачи index.html на сервере нужно или продублировать все варианты запросов с фронта, что как вы понимаете совсем не комильфо, или же использовать app.get('/*', method)

Answer 2

[Максим]

Где-то отвечал на тостере, не могу найти вопрос, но ответ кроется здесь в главе, если у вас не грузится bundle, а скорее всего так и есть.
Если нет - покажите ошибку в консоли браузера.

Comments

[symblight]

Максим: Все работает, я перехожу по ссылкам, зайду к примеру на страницу localhost:8080/account и все отобразится, но стоит обновить эту страницу и все сбрасывается. Пустая страница после перезагрузки.

[symblight]

Проблема появляется после перезагрузки страницы, ошибок никаких нету, тупо пустая страница, в консоли пусто.