Question

我是Next.js的新手，我遇到一个问题，其中http://localhost:3000在使用客户端路由时不起作用，但是在使用刷新时加载。

显示导航的我的Header.js文件

import Link from 'next/link'
const Header = () => (
    <div>
        <Link href='/'>
          <a style={linkStyle}>Home</a>
        </Link>

        <Link href='/about'>
          <a style={linkStyle}>About</a>
        </Link>

        <Link href='/listing'>
            <a style={linkStyle}>Search</a>
        </Link>

    </div>
)

export default Header

然后在server.js上，我几乎有了Next.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('/listing/:id', (req,res) => {
    const actualPage = '/listing'
    const queryParams = {
      id: req.params.id
    }
    app.render(req, res, actualPage, queryParams)

  })

  server.get('*', (req,res) => {
    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)
})

我的/about和/listing页面正常工作，如果我使用/nonexistance-url，它将return 404。但是，我无法客户端链接到/

Answer 1

显然这是next-css的错误

const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})

这2个线程正在谈论这个问题，如果有人偶然遇到相同的错误，显然很难解决。

https://github.com/zeit/next.js/issues/5291

https://spectrum.chat/thread/2183fc55-236d-42cb-92b9-3ab10acc6303

以上职位建议的临时解决方案对我有用。

创建一个空的CSS文件并将其导入您的_app.js

NextJS'/'到index.js不会加载任何内容

1 个答案: