Next.js 使用路径参数时应用程序 404

Question

一般来说，我是 web 开发的新手，正在尝试学习如何使用 next.js 进行服务器端渲染并对 lambda 做出反应。当我在 lambda 上运行它时，代码有些工作。 _breed class 显示参数 valye，例如 shepard，但我在控制台中得到 404。 当我在本地运行它时，我在页面上完全得到 404，因此参数根本不会通过。 这是我的结构：

index.js
server.js
pages/
     index.js
     dogs/
          index.js
          _breed.js

我认为这些是我的相关文件：

服务器.js

const express = require('express')
const path = require('path')
const next = require('next')
const pathMatch = require('path-match')
const isLocalEnvironment = process.env.NODE_ENV !== 'lambda'
const app = next({ isLocalEnvironment })
const handle = app.getRequestHandler()
const { parse } = require('url')

const server = express()
const route = pathMatch()

server.use(async(req, res, next) => {
  await app.prepare();
  next();
})

server.use('/_next', express.static(path.join(__dirname, '.next')))
server.get('/', (req, res) => app.render(req, res, '/'))
server.get('/dogs', (req, res) => app.render(req, res, '/dogs'))

server.get('/dogs/:breed', (req, res) => {
  const params = route('/dogs/:breed')(parse(req.url).pathname)
  return app.render(req, res, '/dogs/_breed', params)
})


server.get('*', (req, res) => handle(req, res))

module.exports = server

狗/index.js

import React from 'react'
import Default from '../../layouts/default'
const meta = { title: 'Dogs', description: 'Dogs' }

class DogsPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      loading: true,
    }
    this.fetchData = this.fetchData.bind(this)
  }
  async componentDidMount () {
    await this.fetchData()
  }
  async fetchData () {
    this.setState({
        loading: false
    })
  }
  render () {
    return (
      <Default meta={meta}>
        <div>
          <h1>Please select a dog from the menu bar.</h1>
        </div>
      </Default>
    )
  }
}

export default DogsPage

_breed.js

import React from 'react'
import Default from '../../layouts/default'
const meta = { title: 'Breed', description: 'Specific Breed' }

class BreedPage extends React.Component {
  static getInitialProps ({ query: { breed } }) {
    return { breed }
  }
  constructor (props) {
    super(props)
    this.state = {
      loading: true,
    }
    this.fetchData = this.fetchData.bind(this)
  }
  async componentDidMount () {
    await this.fetchData()
  }
  async fetchData () {
    this.setState({
      breed: this.props.breed,
      loading: false
    })

  }
  render () {
    return (
      <Default meta={meta}>
        <div>
        <h1>This breed is {this.props.breed}!</h1>
        </div>
      </Default>
    )
  }
}

export default BreedPage

如果我现在启动应用程序并导航到http://localhost:3000/dogs它工作正常。

但是如果我然后 go 到：

http://localhost:3000/dogs/shepard

我得到 404，该页面不存在。

我在服务器的路由中遗漏了什么吗？

Answer 1

return app.render(req, res, '/dogs/_breed', params)

您必须将_breed.js放在dogs目录中。 您的应用无法在 dogs 中找到 _breed，因此它会重定向到 404。

希望这有帮助。