标签: next-router

使用import { useRouter } from "next/router";asimport { useRouter } from "next/navigation";会抛出“'{ pathname: string; query: { search: string; }; }' 类型的参数不可分配给 'string' 类型的参数。”

    const router = useRouter();
    const [searchInput, setSearchInput] = useState("");

    const search = (e) => {
                router.push({
                    pathname: '/search',
                    query: {
                        search: searchInput,
                    },
                })
    }

NextJS文档

Froms 文档：“组件在 Next.js 应用程序之外使用了 useRouter，或者在 Next.js 应用程序之外呈现。在对使用 useRouter 挂钩的组件进行单元测试时可能会发生这种情况，因为它们没有配置 Next.js 的上下文”。

Next.js 文档提到了两种访问router对象的方法：useRouter功能组件和withRouter基于类的组件。

然而，它没有提到我几次遇到的东西，即Router按如下方式访问的对象，例如：

import Router from 'next/router'

Router.push("/")

Router这样使用正确吗？为什么 Next.js 文档没有提到它？

我正在尝试用 Jest 模拟 NextJS 路由器事件。在NextJS router & Jest找到了相关资源。那里的实现与我的非常相似。

但是，那里提到的解决方案对我不起作用。

我的测试如下：

import { mount, ReactWrapper } from 'enzyme';
import FavoritesPage from 'pages/user/favorites';
import configureStore, { MockStore } from 'redux-mock-store';
import storeInitialState from '__tests__/unit/support/storeInitialState';
import { Provider } from 'react-redux';
import { waitFor } from '@testing-library/react';
import { RequestStates } from 'types/State';
import useAdSetup from 'lib/hooks/useAdSetup';

const mockRequestState = RequestStates.Finished;

jest.mock('lib/Auth');
jest.mock('lib/EventLogger');
jest.mock('lib/hooks/useAdSetup');

jest.mock('lib/hooks/useFetchFavorites', () => {
  return (): { requestState: RequestStates } => {
    return {
      requestState: mockRequestState,
    }; …

我有一个自定义挂钩，它将检查您是否已登录，如果未登录，则将您重定向到登录页面。这是我的钩子的伪实现，假设您尚未登录：

import { useRouter } from 'next/router';

export default function useAuthentication() {

  if (!AuthenticationStore.isLoggedIn()) {
    const router = useRouter();
    router.push('/login'); 
  }
}

但是当我使用这个钩子时，我收到以下错误：

错误：找不到路由器实例。您应该只在应用程序的客户端内使用“next/router”。https://err.sh/vercel/next.js/no-router-instance

我检查了错误中的链接，但这并没有多大帮助，因为它只是告诉我将语句移至push渲染函数。

我也尝试过这个：

// My functional component
export default function SomeComponent() {

  const router = useRouter();
  useAuthentication(router);

  return <>...</>
}

// My custom hook
export default function useAuthentication(router) {

  if (!AuthenticationStore.isLoggedIn()) {
    router.push('/login');
  }
}

但这只会导致同样的错误。

有什么方法可以允许在 Next.js 中的 React 组件之外进行路由吗？

我正在开发一个用于每页身份验证的 useUser Hook。我已经正常实现了 useUser 挂钩，因此重定向工作正常。但我收到上述错误。

中止获取路由组件：“/login”

我该如何修复 useUserHook 来解​​决它？

//useUser.tsx
const useUser = ({ redirectTo, redirectIfFound }: IParams) => {
  const { data, error } = useRequest("authed", isAuthed);

  const user = data?.data;
  const hasUser = user;

  useEffect(() => {
    if (!redirectTo) return;
    if (
      // If redirectTo is set, redirect if the user was not found.
      (redirectTo && !redirectIfFound && !hasUser) ||
      // If redirectIfFound is also set, redirect if the user was found
      (redirectIfFound && hasUser)
    ) {
      Router.push(redirectTo); …

我有一个用 React Js 构建的网站，也在 Next Js 上构建了相同的网站。

我现在面临的问题是，与react-router-dom相比，nextJs中的路由器似乎非常慢，更改路由大约需要2-3秒。

以下是您可以通过浏览不同页面来感受性能差异的 URL。

https://cutt.ly/mhbPkOE (React Router Dom) 与 https://cutt.ly/BhbPvHv (NextJs)

我在 Github 上读到了一些评论，其中很少有专家说它将在生产中解决。但在生产中看起来也一样。

请看下面的代码

_app.jsx

// import App from 'next/app'
import React from "react"
import Router from 'next/router';

import "../static/sass/application.scss";

import "bootstrap/dist/css/bootstrap.min.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import 'semantic-ui-css/semantic.min.css'
import { wrapper } from "../../redux/utils/store"

import App from 'next/app';
// A simple component that we created
import {LoaderOverlay} from '../components/Reusable'
class MyApp extends App {
    constructor(props){
        super(props)
        this.state = {
            isLoading: false,
        }
        Router.onRouteChangeStart …

我正在尝试使用传递router.push查询字符串来进行重定向，但是当我尝试在参数中传递带有特殊字符的值（如逗号）时，正在对我的 URL 进行编码。是否可以使用 ',' 传递到 URL 中router.push？

我尝试了很多事情，但我不知道如何让它发挥作用。

router.push({
  pathname: router.pathname,
  query: { ...router.query, pets: 'cats,dogs'},
})

生成的 URL 将是myurl?pets=cats%2Cdogs，我希望它是myurl?pets=cats,dogs。

我正在构建一个 next.js 页面/page/data/[dataId]（当用户单击 page 中的链接时导航该页面/page/data，我通过 API 获取项目列表）。

当用户单击按钮时，我调用 API 来从数据库中删除该项目。一旦API调用成功。我需要将用户重定向回/page/data页面。我是这样做的：

 async function removeData(){

    // ... some logic

    await removeData({input});
    setTimeout(()=>{
          router.push("/page/data"); // redirecting to parent
     },2000)

}

一旦用户被重定向回，/page/data/我需要刷新数据项列表，因为我想删除已删除的项目。现在的问题是 -/page/data/浏览后没有刷新 router.push。

我知道我们可以通过替换来实现这一点，router.push但这window.location="/page/data" 是非常昂贵的方式。

我也尝试过：

router.push("/page/data",undefined,{shallow:false})

但没有成功。

任何人都可以帮助我，我们怎样才能以最佳方式实现这一目标？我发现window.location这种方法太昂贵了。

我通过查询参数将一些数据从一个页面传递到另一个页面，但我想隐藏 URL 中的查询。

这是我的代码。

import { useRouter } from "next/router";

const handleFormSubmit = async (values) => {
    const res = await AuthService.login(values.email, values.password);

    if (res.status === 200) {
   
       if (res.data.is_phone_number_exists === 1 && res.data.is_phone_number_verified === 0) {
        router.push({
          pathname: '/otp-verification',
          query: { email: values.email, password: values.password, phone_number: res.data.phone_number} //I want hide this query part from the url
        }) 
      }
    }
  }

如何在使用时隐藏 URL 中的查询参数router.push()？或者还有其他方法可以做同样的事情吗？

我想重用我在 React-router-dom 中制作的菜单，但这次是在 nextjs 中。目标是当我单击菜单内的链接时，将菜单的状态更改为“false”，并将 menuName 更改为“menu”。

我使用 useEffect 函数来监听历史记录：

//use effect for page changes
  useEffect(() => {
    //listen for page changes
    history.listen(() => {
      setState({ clicked: false, menuName: "Menu" })
    })
  })

并用 withRouter 包装我的组件：

import { withRouter } from 'next/router'
[...]
export default withRouter(Header);

不幸的是，它打印：

TypeError: Cannot read property 'listen' of undefined

我应该更好地使用“useRouter”来解决这个问题吗？如何？

谢谢 ;）