使用带有 next.js 的反应路由器

Posted

技术标签:

【中文标题】使用带有 next.js 的反应路由器【英文标题】:using react router with next.js 【发布时间】:2021-06-26 16:47:36 【问题描述】:

我正在学习如何将 Next.js/React 用于我的应用程序。我目前正在研究路由的主题,我有几个问题。我知道你可以将 react-router 用于 React(我之前使用过 vue-router)。但是,我不知道是否需要将 react-router 与 Next.js 一起使用,以及如果可以的话我将如何使用它。我目前正在使用页面目录来保存要重定向到的页面。如何在 React/Next 中重定向到不同的页面?

下面是一些实现它的示例代码:

Class Login extends Component 

  state = 
    user: ,
  

  loginUser = (e) => 
      loginUser(this.state.user)
        .then(response => 
          console.log(response);
          if (response['username']) 
            console.log('yippee!');
          
      );
  


在 yippee 之后,我想重定向到 pages 文件夹中的 /home。

【问题讨论】:

我建议您阅读next/router documentation。特别是withRouter 部分。 【参考方案1】:

对于您的第一个问题,我需要说:不,您不需要在 Nextjs 中使用 react-router,它将使用基于文件系统的路由器,您可以阅读更多关于它的信息 here

因此,在您设置好路线后,如果您想导航到它们,您有两个选择:

首先使用来自next/linkLink组件:更多关于它here

第二使用来自next/routerrouter,您可以像useHistory 一样从react-router 导航:更多关于它here

文档中的示例:

import  useRouter  from 'next/router'

function ActiveLink( children, href ) 
  const router = useRouter()
  const style = 
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  

  const handleClick = (e) => 
    e.preventDefault()
    router.push(href)
  

  return (
    <a href=href onClick=handleClick style=style>
      children
    </a>
  )


export default ActiveLink

因此,在您的情况下,您可以使用以下方式进行重定向:

import  withRouter  from 'next/router'

Class Login extends Component 

  state = 
    user: ,
  

  loginUser = (e) => 
      loginUser(this.state.user)
        .then(response => 
          console.log(response);
          if (response['username']) 
            console.log('yippee!');
            //here is what you need:
            this.props.router.push('/your-route');
          
      );
  



export default withRouter(Login)

【讨论】:

以上是关于使用带有 next.js 的反应路由器的主要内容,如果未能解决你的问题,请参考以下文章

Next.js 带有子域的域路由

如何基于 GraphQL API 的 slug 使用 Next.js 进行动态路由?

反应 - 带有Router的路由器不注入路由器

带有可加载组件错误的反应路由器

通过 next.js 路由覆盖故事书路由

使用 Next.js 的动态路由