Question

问题：在react + nextjs应用中

如果我使用链接从http://localhost:3000导航到http://localhost:3000/p/hello。
刷新页面。
单击后退按钮：转到http://localhost:3000，但仍呈现http://localhost:3000/p/hello的内容，而不是加载http://localhost:3000的内容。

我正在使用“ next”：“ ^ 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内容。

Answer 1

此问题绝对与服务器代码无关。它与下一个路由器有关，我建议您专注于路由器。

确保包括模块

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

Answer 2

我认为您可能需要在您的公共资产（例如html，图片，js）所在的位置添加一个静态文件夹：

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

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

下一个js：在后退按钮上，点击页面内容未加载

2 个答案: