我在使用NextJs useRouter时遇到问题

zi8p0yeb 于 2023-05-17 发布在其他

关注(0)|答案(3)|浏览(260)

我在使用NextJs useRouter时遇到了问题。
我有一个在路径之间导航的函数，我使用useRouter来实现这一点，我在包含数组对象的库中写道：

router = useRouter()

const actions = [
  {
  ...
    perform: (e) => router.push('/'),
  ...
  }
]

但它会导致错误TypeError: Cannot read properties of null (reading 'useContext')

2 | import {useRouter} from 'next/router'
  3 | 
> 4 | const { router } = useRouter()
    |                            ^
  5 | 
  6 | const actions = [
  7 |   {

我将这个库导入到另一个组件中，这就是_app.js的样子：

...
<div className={'webkit selection'+theme}>
   <CmdBar theme={theme}/>  => this is where the library imported in
   <Metatags description='null'/>
   <StyleReset/>
   <Component themeUse={themeUse.styles} theme={theme} {...pageProps} />
   <Bar theme={theme} setTheme={setTheme} setThemeUse={setThemeUse} themeProvider={themeProvider}/>
</div>
...

我遇到过这个错误，就像我之前在React和React Router中使用useLocation一样，因为组件在Route之外。我认为这是主要原因。

**编辑：**如果我使用任何可以刷新页面的东西，它都不会保持相同的UI，所以这是我想弄清楚的。

谢谢你！

next.js

来源：https://stackoverflow.com/questions/72067405/im-having-trouble-with-nextjs-userouter

3条答案

按热度按时间

ldxq2e6h1#

你好，问题发生是因为你在顶层使用了一个React钩子。相反，你应该在React Functional组件中使用钩子。
就像这样：

import { useRouter } from 'next/router'

function ActiveLink({ href }) {
  const router = useRouter()

  return (
    <a href={href}>
      This will redirect
    </a>
  )
}

export default ActiveLink

我建议你去查Rules of Hooks

赞(0）回复(0）举报 2023-05-17

mkh04yzy2#

据我所知，您在导入后立即调用useRouter，而不是在组件内部调用。Hooks也需要在React函数组件中调用。
https://reactjs.org/docs/hooks-rules.html
即

import { useRouter } from 'next/router'
 
const actions = [..]

const Component = () => {
     const router = useRouter() // use it here

     ...
}

赞(0）回复(0）举报 2023-05-17

dly7yett3#

你现在可能已经发现了这一点，但是我遵循了一个建议，在我的API（.ts）库中使用Next Router而不使用钩子。

import Router from 'next/router';

// Use directly
Router.push('/404');

赞(0）回复(0）举报 2023-05-17

我来回答

我在使用NextJs useRouter时遇到问题

3条答案

相关问题

热门标签

最新问答