标签: dynamic-routing

我有一个旧版本的静态文件夹nextjs。我更新了我nextjs的使用public文件夹。

"next": "^9.4.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",

这是我的nextjs配置：

const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
require('dotenv').config();
const withSourceMaps = require('@zeit/next-source-maps')();

if (typeof require !== 'undefined') {
  // eslint-disable-next-line no-unused-vars
  require.extensions['.css'] = file => {};
}

const nextConfig = {
  env: {
    BUILD_ENV: process.env.BUILD_ENV,
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // eslint-disable-next-line no-param-reassign
      config.resolve.alias['@sentry/node'] = '@sentry/browser';
    }

    if (isServer) …

我希望能够在运行时添加新路由，而无需使用 NodeJS 和 ExpressJS 重新启动服务器。我采用了类似的方法，如本文中所示： https: //alexanderzeitler.com/articles/expressjs-dynamic-runtime-routing/
从技术上讲，我可以在本文中同样在运行时添加新文件和逻辑，但问题是当没有 api 路由匹配时，我将发送 404 JSON 响应（正如它应该的那样）。

我认为我遇到的问题是我的动态创建的路由永远不会到达，因为静态路由优先于动态创建的路由。这意味着创建的路由将在错误处理后安装，因此永远不会到达。我在app.js中的代码

...

// Routes
app.use('/api/products', productRoutes);
app.use('/api/users', userRoutes);

...

/* This is where the dynamically created routes should be mounted */

// Error handling
app.use((req, res, next) => {
    const err = new Error('Not found');
    err.status = 404;
    next(err);
});

app.use((err, req, res, next) => {
    res.status(err.status || 500).json({error: {message: err.message}});
});

/* This is where the dynamic routes are mounted */

module.exports = app;

当我注释掉错误处理时，我能够访问在运行时创建的路由，而通过错误处理，我只能在服务器重新启动后访问动态创建的路由，这是我想避免的。 …

我一直在尝试在 NextJS 中为我​​的 API 路径进行重写。这是为了避免 CORS 问题。

我遵循了以下解决方案：NextJs CORS问题。

它可以在本地主机上运行，​​但不能在生产环境中运行（我在 Vercel 本身上部署）。

我基本上尝试了所有类型的重写：

async rewrites() {
    return {
      beforeFiles: [
        {
          source: "/api/:path*",
          destination: `https://example.com/api/v1/:path*`,
          basePath: false,
        },
      ],
      afterFiles: [
        {
          source: "/api/:path*",
          destination: `https://example.com/api/v1/:path*`,
          basePath: false,
        },
      ],
      fallback: [
        {
          source: "/api/:path*",
          destination: `https://example.com/api/v1/:path*`,
          basePath: false,
        },
      ],
    };
  },

此重写在本地主机上有效，但在生产中，重写停止工作并且 API 调用自行进行/api/:path*。

我目前正在将我的一个 React 应用程序迁移到 NextJS，并且正在努力将我之前的 React-router 架构融入到 nextjs 路由中。

我正在构建的页面看起来像这样：

当用户访问 collection/:collectionId 时，会获取横幅图像以及一些基本详细信息。此数据应该在 3 个子页面中持续存在，并且不应重新获取，因此我需要一个包含三个选项卡的 CollectionContext。

然后，对于每个选项卡，根据用户所在的选项卡，有 3 个单独的数据获取：

• 集合/:集合 ID/项目
• 集合/:collectionid/分析
• 收藏/:collectionid/拍卖

我也希望有 3 个独立的上下文。

我当前的方法是这样的页面结构：

问题在于 items.jsx 似乎不是 [address].jsx 的子级，并且 [address].jsx 不是集合的子级，因此上下文对我不起作用。

此外，我尝试使用嵌套布局来处理侧边栏+横幅图像，但该布局似乎也不是集合的子级，因此它无法访问上下文状态。

我想在 Vue.js 中实现 n 级动态嵌套路由，其中​​ n 对我来说是未知的。例如 -

abc.com/ctx-path/component/1/2/...../n

其中 1,2,...n 是级别

如何使用 Vue-router 实现这一目标？

我在我的项目中使用 nextJS SSR。现在，当我尝试使用以下代码获取页面参数时，它显示未定义。

 function About() {
  const router = useRouter();
  const { plan_id } = router.query;
  console.log(plan_id)
 }
 export default About;

当页面从其他页面路由时（没有使用“下一个/链接”重新加载页面）时它可以工作，但是当我刷新页面时它不起作用。有人可以帮忙吗？

我目前使用完全静态生成的 Next js，因为我想从 S3 + 云前端提供所有页面（不涉及服务器）。Next js 对此有很好的支持，除了动态页面（例如：/posts/:id）。解决此类场景的所有框架功能都涉及在构建时渲染所有可通过的页面（这是不可行的），或者让服务器渲染这些具有动态路由的页面（因此使该站点成为混合应用程序）。为了继续保持完全静态，我需要找到解决这个问题的方法。在创建反应应用程序中，可以使用反应路由器并解析客户端的路由，这正是我想要为动态路由所做的事情。但据我所知，next js 和react-router 不兼容，所以显然这不是一个选择。

我想在 nextjs 中创建动态页面以匹配以下路线users/[user]/[dashboard]。我的文件结构

pages/
 users/
  -[user].js       // will match for /users/123
  - index.js        // will match for /users
    dashboard/
      - [dashboard].js   // will match for /users/1234/ABCD

我只收到[user]查询参数中的 ，而不是 [dashboard].js 内的 [dashboard] 。有人可以解释如何安排文件结构以匹配users/[user]/[dashboard]

我的浅薄理解导致了渲染 NotFound 页面的一个简单问题......

<Routes>
          <Route path="*" element={<NotFound />}/>
          <Route path="/" element={<Home />} />
          <Route path="/:category/:id" element={<Article />} />
        </Routes>

当uri包含一个“/”时，它会渲染匹配的组件或NotFound组件，但是，当uri包含两个“/”时，例如不存在的“/asoejdnxx/acnoiw”，它不会路由到NotFound 页面，但仅呈现一个没有错误的空白页面。

我假设问题是因为 React 正在寻找第三条路线中的参数（具有 :category 和 :id 参数），无论它是否匹配。

我确信不需要在“Article”组件中添加条件，例如如果参数与现有的 :id 不匹配，则渲染其他内容（因为这就是 path="*" 的目的） ，但我找不到重定向或渲染 NotFound 组件的方法。