Блог

Проблема: в приложении react nextjs

1. Если я перейду из http://localhost:3000 чтобы http://localhost:3000/p/hello используя ссылку.
2. Обновите страницу.
3. Нажмите кнопку «Назад»: она переходит к http://localhost:3000 но все же отображает содержимое http://localhost:3000/p/hello это не загрузка содержимого http://localhost:3000 .

Я использую «следующий»: «^ 8.1.0».

Ссылка для навигации

         <div>
            Click{' '}
            <Link as={`/p/hello`} href={`/postDetails?title=hello`}>
                <a>here</a>
            </Link>
            to read more
        </div>
  

server.js :

 const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app
  .prepare()
  .then(() => {
    const server = express()
server.get('/p/:id', (req, res) => {
  const actualPage = '/postDetails'
  const queryParams = { title: req.params.id }
  app.render(req, res, actualPage, queryParams)
})

server.get('*', (req, res) => {
    //app.render(req, res, '/', queryParams)
  return handle(req, res)
})

server.listen(3000, err => {
  if (err) throw err
  console.log('> Ready on http://localhost:3000')
})
  })

  .catch(ex => {
    console.error(ex.stack)
    process.exit(1)
  })
  

Он должен загрузить index.js (localost:3000) содержимое, но оно показывает http://localhost:3000/p/hello содержание.

Эта проблема определенно не связана с кодом сервера. Это связано со следующим маршрутизатором, я бы рекомендовал вам сосредоточиться на маршрутизаторе.

Обязательно включите модуль

import Link from 'next/link';

А как насчет попытки без фигурных скобок

 <div>
     Click{' '}
     <Link as='/p/hello' href='/postDetails?title=hello'>
       <a>here</a>
     </Link>
     to read more
</div>
  

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

 <Link route='postDetails' params={{title: 'hello'}}>
  <a>Hello world</a>
</Link>
  

https://www.npmjs.com/package/next-routes

У нас была такая ошибка в нашем приложении более одного раза. Мы обнаружили, что это вызвано другим кодом (не ссылками), который касался истории браузера. В одном случае это было через replace from useRouter() , но оно было неправильно отформатировано. В другом случае это был код, который напрямую изменял историю браузера window.history .

Я надеюсь, что это поможет любому, кто столкнется с такой ошибкой, знать, где искать.

Я думаю, вам может потребоваться добавить статическую папку, в которой находятся ваши общедоступные ресурсы (например, html, изображения, js):

 server.use(express.static('public'))
  

https://expressjs.com/en/starter/static-files.html