NextJS-如何处理重定向，同时我的策略返回错误

Question

我正在尝试获取在浏览器中输入的 URL 以在我的 NextJS 自定义服务器中进行一些重定向。此错误仅在开发模式下发生，在生产模式下没有，所以这是正常的吗？在开发模式下需要做一些修改来处理这个问题？

我尝试使用路径名对象。可悲的是，当我第一次在地址栏中输入 URL 时，我的路径名首先返回：

/_next/静态/块/0.js

我尝试过使用req.rawHeaders。但是我的控制台直到第 15 次试用才返回任何内容：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：

req.rawHeaders path in next.server.js ：/pathTargeted//work ！ 但有点晚了..

我也尝试过使用req.headers.referer，但即使，返回的第一个路径也不是我在URL中输入的路径。

结果是我陷入了 404 错误。那么如何避免这种情况并始终获取在浏览器中输入的真实地址呢？这正是我的问题。

这是我的反应片段：

import React, {Component} from "react"; 
import style from "./BlogHubTemplate.module.css";
import storeWrapper from "../../HOC/storeWrapper/storeWrapper"
import {connect} from 'react-redux';
import Router from 'next/router'

class BlogHubTemplate extends Component { 
redirectPost = (postCategory, postTitle) => { 
Router.replace(`/${postCategory}/${postTitle}`) 
}

这是我的自定义 Next.server JS：

app.prepare().then(() => {
createServer((req, res) => {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl; 
console.log("req.headers in next.server.js : ", req.headers.referer.substr(22))
console.log("req.rawHeaders path in next.server.js : ", req.rawHeaders[11].substr(22))

任何提示都会很棒， 谢谢

Answer 1

这不是下一个.js问题

只需在您使用window.location.pathname的每个位置添加decodeURIComponent

---

28 代码行 https://github.com/Hocoh/redirect_next/blob/master/ui/pages/post.js#L29

而不是：

var postFullPath = window.location.pathname.substr(1) ;

应该是：

var postFullPath = decodeURIComponent(window.location.pathname).substr(1) ;

---

---

38 代码行 https://github.com/Hocoh/redirect_next/blob/master/ui/pages/blog.js#L38

而不是：

var pageTargeted = window.location.pathname.substr(11) ; 

应该是：

var pageTargeted = decodeURIComponent(window.location.pathname).substr(11) ; 

---

13 代码行

https://github.com/Hocoh/redirect_next/blob/master/ui/components/BlogHubTemplate/utils/Pagination/Pagination.js#L13

而不是

window.location.pathname = `blog/page/${pageTargeted}`

应该是：

Router.push(decodeURIComponent(`blog/page/${pageTargeted}`))

---

---

10 代码行

https://github.com/Hocoh/redirect_next/blob/master/ui/components/BlogHubTemplate/utils/Pagination/PaginationMain/PaginationMain.js#L10

而不是：

window.location.pathname = `blog/page/${pageTargeted}`

应该是：

Router.push(decodeURIComponent(`blog/page/${pageTargeted}`))

---

代码行 31

https://github.com/Hocoh/redirect_next/blob/master/ui/components/BlogHubTemplate/BlogHubTemplate.js#L31

而不是：

Router.replace(`/${postCategory}/${postTitle}`);

应该是：

Router.push(decodeURIComponent(`/${postCategory}/${postTitle}`));

并将decodeURIComponent添加到另一个文件