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

【问题标题】：Next.js application 404 when using path params使用路径参数时 Next.js 应用程序 404
【发布时间】：2020-04-24 12:52:11
【问题描述】：

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

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

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

server.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

dogs/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 它工作正常。

但如果我再去：

http://localhost:3000/dogs/shepard

我得到 404，页面不存在。

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

【问题讨论】：

标签： javascript next.js

【解决方案1】：

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

您必须将_breed.js 放入dogs 目录中。您的应用在狗体内找不到 _breed，因此它重定向到 404。

希望对您有所帮助。

【讨论】：