Неглубокая маршрутизация с использованием withRouter и настраиваемого сервера не работает - PullRequest
Новая
       34

Неглубокая маршрутизация с использованием withRouter и настраиваемого сервера не работает

0 голосов
/ 12 июля 2020

Использование withRouter в качестве оболочки с настраиваемым сервером, мелкая маршрутизация, похоже, не работает.

В настоящее время я использую этот метод для изменения маршрута: 

this.props.router.push({
    pathname: currentPath,
    query: currentQuery,
});

от использования withRouter для обертывания моего компонента класса.

И не мог понять, куда поставить мелкий флаг. Поэтому я переключился на метод, упомянутый в документации: 

this.props.router.push('/post/[pid]?hello=123', '/post/abc?hello=123', { shallow: true })

Итак, я сделал это вручную, но начал получать 404. 

http://localhost:3000/_next/static/development/pages/search/%5Btype%5D/%5Bcat%5D/%5Barea%5D.js net::ERR_ABORTED 404 (Not Found)

декодировано: 

"http://localhost:3000/_next/static/development/pages/search/[type]/[cat]/[area].js"

Я пробовал использовать: type вместо [type], но это тоже не сработало.

Вот как это настроено на сервере: 

    if ('/search/:type/:cat/:area' === route.path) {
        return app.render(req, res, route.page);
    }

Структура папки: 

/pages/search/index.js

Я думаю, что эта структура имеет какое-то отношение к проблеме, поскольку она находится в индексе. js, а не просто файл в папке страниц.

Он не должен перезагружать страницу при смене маршрута вот главное что пытаюсь выполнить sh. Я реализую разбиение на страницы SSR и планирую использовать неглубокую маршрутизацию, чтобы изменения страниц происходили на клиенте, а не на сервере. Это означает достижение SSR только при первой загрузке, сохранение пользователя без обновления.

Я также пробовал это: 

server.get('/search/:type/:cat/:area', (req, res) => {
         console.log("reached here...");   // this gets logged
        return app.render(
            req,
            res,
            '/search/[type]/[cat]/[area]',
            req.params
        );
});

Но я получаю 404, страницы сейчас нет!

Это тоже не сработало: 

   this.props.router.push(
        `/search/[type]/[cat]/[area]?${stringifyQs(currentQuery)}`,
        {
            pathname: currentPath,
            query: currentQuery,
        },
        { shallow: true }
    );

1 Ответ

1 голос
/ 14 июля 2020

Это должно работать:

server.js

server.get('/search/:type/:cat/:area', (req, res) => {
  return app.render(req, res, '/search', {
    ...req.params,
    ...req.query,
  });
});

pages/search/index.js

props.router.push(
  '/search?type=foo&cat=bar&area=baz&counter=10',
  '/search/foo/bar/baz?counter=10',
  { shallow: true }
);

Связанная проблема с GitHub

...