动态路由无法在浏览器中刷新？

Question

我有一个使用 next-routes 的 React 应用程序。导航按预期工作，但使用 Page does not exist 的自定义路由 404s 刷新页面。

这只发生在包含参数的动态路由中。

routes.js:

const routes = require('next-routes')();

routes
  .add('/campaigns/new', '/campaigns/new')  //fine     
  .add('/campaigns/:address', '/campaigns/show') //fails
  .add('/campaigns/:address/requests', '/campaigns/requests/index') //fails
  .add('/campaigns/:address/requests/new', '/campaigns/requests/new'); //fails

module.exports = routes;

如何配置路由以允许刷新自定义路由？

Answer 1

在浏览器中刷新路由或手动输入 url 将导致浏览器向指定的 url 发出网络请求。路由在您的应用程序中工作，因为浏览器的默认功能被阻止并且地址栏中的路由被更新以模拟典型的 non-spa 网络应用程序的工作方式。如果您想要此功能，那么正确的方法是 return 您后端所有路由上的 index.html 文件。如果您没有后端，则可以使用某些静态主机的变通方法。 Here 是一种使路由与 github 页面一起工作的方法。

Answer 2

正如 Canaan 已经提到的，您的服务器不知道您创建的路由，因此会抛出 404 错误。您需要告诉您的服务器（不是 Next，而是 Express 或 http）这些位置有动态路由。 Check out the next-routes documentation 看看如何实现：

// server.js
const next = require('next')
const routes = require('./routes') // <- your routes file
const app = next({dev: process.env.NODE_ENV !== 'production'})
const handler = routes.getRequestHandler(app)

// With express
const express = require('express')
app.prepare().then(() => {
  express()
    .use(handler) // <- this line is important
    .listen(3000)
})

动态路由无法在浏览器中刷新？

Dynamic routes fail to refresh in browser?

reactjs

next.js