动态路由未能在浏览器中刷新？

Question

我有一个反应应用程序使用下一个路线。导航按预期工作，但使用Page does not exist自定义路由404刷新页面。

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

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

正如迦南已经提到的，您的服务器不知道您创建的路由，因此抛出一个404错误。您需要告诉您的服务器(不是Next，而是Express或http)，在这些位置有动态路由。为了了解如何实现这一点，请使用文档：

// 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)
})

Answer 2

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