Next.js 如何在nextjs的this.props中获取历史记录和匹配？

我想获得历史的价值，并在这个.props中匹配。我正在使用

next/router

导入

withRouter

。我想使用this.props.match.params获取url和

历史记录中的值。按
重定向。如何在Next.js中获取此信息。现在我没有在这个.props中获取历史记录和匹配。
下一个/router
没有像
react dom router
那样提供历史记录，它在组件的
props中提供了一种称为查询的东西

这是官方的

从“下一个/路由器”导入{useRouter}
const Post=（）=>{
const router=useRouter（）
const{pid}=router.query
返回Post:{pid}

}
导出默认帖子

如果你想推动路线，你可以遵循这一条

从“下一个/路由器”导入路由器
函数ReadMore（）{
返回(
单击Router.push（'/about'）}>此处阅读更多信息
)
}
导出默认ReadMore
您也可以使用路由器

import Router from 'next/router'
// on Submit handler
Router.push(url)

其中url是要重定向到的页面

编辑：由于全局路由器对象污染不是一件好事，因此可以使用状态变量：

const异常=['/注册']；
/**
*在更改路由之前保存当前URL。
*/
常量userouterlHistory=（）=>{
const[previousRoute，setPreviousRouter]=useState（“”）；
const router=useRouter（）；
const handleBeforeHistoryChange=（url）=>{
const[nextUrl]=url？.split（“？”）| |[]；
如果(
！（例外。包括（nextUrl）| |例外。包括（router.asPath））&&
nextUrl！==router.asPath
) {
setPreviousRouter（router.asPath）；
}
};
useffect（（）=>{
router.events.on（'beforeHistoryChange'，handleBeforeHistoryChange）；
return（）=>{
router.events.off（'beforeHistoryChange'，handleBeforeHistoryChange）；
};
}, []);
返回{previousRoute}；
};
导出默认UserOuterlHistory；

您必须在_app.js中使用钩子，因为您侦听路由更改并希望全局保存/访问以前的路由

constmyapp=（{Component，pageProps}）=>{
const{previousRoute}=userouterlHistory（）；
返回(
您可能不会影响Router.history，它可能不会触发此事件挂钩

const EXCEPTIONS = ['/sign-up'];

/**
 * Saves the current URL before changing the route.
 * The previousRoute is then accessible via the global Router.
 */
const useRouteUrlHistory = () => {
  const handleBeforeHistoryChange = (url) => {
    const [nextUrl] = url?.split('?') || [];

    if (
      !(EXCEPTIONS.includes(nextUrl) || EXCEPTIONS.includes(Router.asPath)) &&
      nextUrl !== Router.asPath
    ) {
      Router.previousRoute = Router.asPath;
    }
  };

  useEffect(() => {
    Router.events.on('beforeHistoryChange', handleBeforeHistoryChange);

    return () => {
      Router.events.off('beforeHistoryChange', handleBeforeHistoryChange);
    };
  }, []);
};

export default useRouteUrlHistory;

你在哪里使用这个钩子，当然它必须在应用程序根目录附近，也必须在希望访问路由历史记录的子目录中？在任何功能性的react组件中都不重要。这里的主要问题是我污染了路由器对象，这对NextJs useRouter钩子不起作用。因为我使用的是来自next-i1的自定义路由器8接下来，这不是一个特别的问题，因为Router对象是一种全局可访问的对象。我已经编辑了这个示例，以便在app.js中使用钩子而不会造成路由器污染
import Router from 'next/router'
// on Submit handler
Router.push(url)

const EXCEPTIONS = ['/sign-up'];

/**
 * Saves the current URL before changing the route.
 * The previousRoute is then accessible via the global Router.
 */
const useRouteUrlHistory = () => {
  const handleBeforeHistoryChange = (url) => {
    const [nextUrl] = url?.split('?') || [];

    if (
      !(EXCEPTIONS.includes(nextUrl) || EXCEPTIONS.includes(Router.asPath)) &&
      nextUrl !== Router.asPath
    ) {
      Router.previousRoute = Router.asPath;
    }
  };

  useEffect(() => {
    Router.events.on('beforeHistoryChange', handleBeforeHistoryChange);

    return () => {
      Router.events.off('beforeHistoryChange', handleBeforeHistoryChange);
    };
  }, []);
};

export default useRouteUrlHistory;