Блог

У меня проблема с тем, как мое приложение React Redux SSR обрабатывает навигацию по сайту.У меня есть маршрут для страниц списка, которые будут отображать разные данные в зависимости от параметров в URL.

Routes.js файл

 export default [
  {
    ...App,
    routes: [
      {
        ...HomePage,
        path: '/',
        exact: true
      },
      {
        ...ListPage,
        path: '/list/:id',
        exact: true
      },
 

В моем Index.JS файл, в котором работает мой сервер express, я просматриваю каталог маршрутов, чтобы найти путь(пути), соответствующий пути запроса…

 const app = express();
app.use(express.static('public'));
app.get('*', (req, res) => {
  const store = createStore(req);

  const promises = matchRoutes(Routes, req.path)
    .map(({ route }) => {
      console.log("Looking at Route: ", route);
      if (route.loadData) {
        const params = req.path.split('/');
        console.log('my params are: ', params)
        return route.loadData(store, params[2])

      }else{
        return null
      }
    })
    .map(promise => {
      if (promise) {
        return new Promise((resolve, reject) => {
          promise.then(resolve).catch(resolve);
        });
      }
    });

  Promise.all(promises).then(() => {
    const context = {params: req.params};
    const content = renderer(req, store, context);

    if (context.url) {
      return res.redirect(301, context.url);
    }
    if (context.notFound) {
      res.status(404);
    }

    res.send(content);
  });
});
 

Я понимаю, что для итерации должно быть только 2 вещи: маршрут компонента приложения и маршрут компонента страницы списка, затем он вызывает соответствующие функции loadData (), и веб-сайты продолжают работать. Однако после того, как он пройдет первые 2 маршрута и заполнит мою страницу соответствующей информацией, Index.js файл вызывается снова и повторяется по маршрутам, но на этот раз вместо URL-адреса, к которому пользователь пытается получить доступ, он заменяет его на «bundle.js» и я не понимаю, что здесь происходит. Это результат, который я получаю, я бы хотел, чтобы у меня была только верхняя половина результата.

ПРИМЕЧАНИЕ . это изображение взято с моей консоли (я объединил выходные данные на стороне клиента и сервера в 1 окне) ниже я включу скриншот моих конфигурационных файлов

Конечно, мой код не ожидал этого в качестве пути, и приложение ломается, потому что оно пытается получить информацию в списке с идентификатором «bundle.js» вместо стандартного номера.

Вопрос может ли кто-нибудь объяснить мне, что мои коды здесь делают неправильно, или если это то, как он должен себя вести, как я работаю над этим, я был бы очень признателен.

В настоящее время я пытаюсь создать свое первое приложение SSR, поэтому я новичок в этой технологии, поэтому, возможно, я упускаю что-то очевидное.

При дальнейшем расследовании я заметил, что файл bundle.js то, что я мог видеть в консоли, указывало на файл в местоположении /list/bundle.js , но мой пакет на самом деле находился в моем общедоступном каталоге, поэтому мне пришлось изменить Src скрипта, чтобы он ссылался на http://localhost:3000/bundle.js то, что после того, как я сделал, это приложение функционировало так, как предполагалось.