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

Question

我正在尝试获取在浏览器中输入的 URL，以便在我的 NextJS 自定义服务器中进行一些重定向。这个错误只在开发模式下出现，在生产模式下不会出现，请问这是正常的吗？需要对 devmode 进行一些修改来处理这个问题吗？

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

/_next/static/chunks/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 ! but a little bit in late ..

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

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

这是我的reactjs片段:

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

这不是 next.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 添加到另一个文件