Reactjs NextJS：指定公共渲染模板

下面是我尝试使用的链接结构示例：

www.baseurl.com/pathname/一些子信息

我基本上希望NextJS呈现与

/pathname/

-so

pathname.js

匹配的文件。无论子信息是什么，NextJS都应该呈现

pathname.js

文件，使用

/some子信息

作为API调用的参数

我知道这基本上可以通过通过链接传递查询来实现，并让它钩住路径名，尽管市场营销部门告诉我这就是他们想要链接的方式

我有点不知所措，因为这是我第一次使用Next和SSR。我希望Next中有某种方法可以指定，当某个文件点击url的

/pathname

部分时，它应该呈现该文件，然后忽略url的其余部分

---

这可能要求太多了bug如果有其他方法我可以做到这一点，非常感谢提供指导信息。

我能想到的解决方案是添加一个类似于

/pathname/某些子信息的解析路径，并将其转换为页面，以呈现
路径名
和一些附加参数
某些子信息

server.js

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);

    const { pathname, query } = parsedUrl; // pathname = '/pathname/some-sub-information'
    const parts = pathname.split('/');
    const page = parts[1]; // 'pathname'
    const param = parts[2]; // 'some-sub-information'

    if (page) {
      const queryParams = { ...query, pageParam: param };
      app.render(req, res, '/' + page, queryParams);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, err => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

function Index({ pageParam }) {
  return (
    <div>
      INDEX component with {pageParam}
    </div>
  );
}

Index.getInitialProps = async ({ query }) => {
  const { pageParam } = query;
  return { pageParam };
};

export default Index;

从服务器传递到客户端的参数
app.render（req，res，'/'+page，{pageParam:'test'}）query
param内访问code>，例如
query.pageParam

所以这个页面看起来像这样

页面/index.js

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);

    const { pathname, query } = parsedUrl; // pathname = '/pathname/some-sub-information'
    const parts = pathname.split('/');
    const page = parts[1]; // 'pathname'
    const param = parts[2]; // 'some-sub-information'

    if (page) {
      const queryParams = { ...query, pageParam: param };
      app.render(req, res, '/' + page, queryParams);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, err => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

function Index({ pageParam }) {
  return (
    <div>
      INDEX component with {pageParam}
    </div>
  );
}

Index.getInitialProps = async ({ query }) => {
  const { pageParam } = query;
  return { pageParam };
};

export default Index;

函数索引（{pageParam}）{
返回(
具有{pageParam}的索引组件
);
}
Index.getInitialProps=异步（{query}）=>{
const{pageParam}=query；
返回{pageParam}；
};
出口违约指数；

使用此自定义服务器和
页面/index.js
（
节点服务器.js
），转到/index/此处的一些数据将生成

希望这对你有帮助
 我能想到的解决方案是添加一个解析路径，如
/pathname/some sub-information
，并将其转换为页面以呈现
路径名
和一些附加参数
some sub-information

server.js

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);

    const { pathname, query } = parsedUrl; // pathname = '/pathname/some-sub-information'
    const parts = pathname.split('/');
    const page = parts[1]; // 'pathname'
    const param = parts[2]; // 'some-sub-information'

    if (page) {
      const queryParams = { ...query, pageParam: param };
      app.render(req, res, '/' + page, queryParams);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, err => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

function Index({ pageParam }) {
  return (
    <div>
      INDEX component with {pageParam}
    </div>
  );
}

Index.getInitialProps = async ({ query }) => {
  const { pageParam } = query;
  return { pageParam };
};

export default Index;

从服务器传递到客户端的参数
app.render（req，res，'/'+page，{pageParam:'test'}）query
param内访问code>，例如
query.pageParam

所以这个页面看起来像这样

页面/index.js

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);

    const { pathname, query } = parsedUrl; // pathname = '/pathname/some-sub-information'
    const parts = pathname.split('/');
    const page = parts[1]; // 'pathname'
    const param = parts[2]; // 'some-sub-information'

    if (page) {
      const queryParams = { ...query, pageParam: param };
      app.render(req, res, '/' + page, queryParams);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, err => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

function Index({ pageParam }) {
  return (
    <div>
      INDEX component with {pageParam}
    </div>
  );
}

Index.getInitialProps = async ({ query }) => {
  const { pageParam } = query;
  return { pageParam };
};

export default Index;

函数索引（{pageParam}）{
返回(
具有{pageParam}的索引组件
);
}
Index.getInitialProps=异步（{query}）=>{
const{pageParam}=query；
返回{pageParam}；
};
出口违约指数；

使用此自定义服务器和
页面/index.js
（
节点服务器.js
），转到/index/此处的一些数据将生成

希望这对你有帮助
 哦，这看起来确实是一个很好的方法！非常感谢今天我将测试它，如果一切顺利，将答案标记为已接受！非常感谢@iurii-它像一个符咒一样工作！然而，我确实收到了关于
url
被折旧的警告，因此最终通过
next/router
中的
withRouter
运行该组件，从而解决了该问题。因此，我没有使用
getInitialProps
，而是使用路由器（索引）导出默认值，它允许我访问路由器道具，其中包含相同的信息。哦，这似乎是一个很好的方法！非常感谢今天我将测试它，如果一切顺利，将答案标记为已接受！非常感谢@iurii-它像一个符咒一样工作！然而，我确实收到了关于
url
被折旧的警告，因此最终通过
next/router
中的
withRouter
运行该组件，从而解决了该问题。因此，我没有使用
getInitialProps
，而是使用路由器（索引）导出默认值，允许我访问包含相同信息的路由器道具。