在nextjs中获取URL路径名

IT技术 reactjs next.js
2021-04-15 14:07:24

我有一个登录页面和布局组件。布局组件有标题。我不想在登录中显示标题。为此我想获取 url 路径名。基于路径名显示标题。

import * as constlocalStorage from '../helpers/localstorage';
import Router from 'next/router';

export default class MyApp extends App {
    componentDidMount(){
        if(constlocalStorage.getLocalStorage()){
            Router.push({pathname:'/app'});
        } else{
            Router.push({pathname:'/signin'});
        }

    }

    render() {
        const { Component, pageProps } = this.props
        return (
//I want here pathname for checking weather to show header or not
                <Layout>
                    <Component {...pageProps} />
                </Layout>
        )
    }
}

请帮忙

6个回答

如果要访问router应用程序中任何功能组件内的对象，可以使用useRouter钩子，以下是使用方法：

import { useRouter } from 'next/router'

export default function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.pathname === href ? 'red' : 'black',
  }

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

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

如果 useRouter 不是最适合您的，withRouter 也可以将相同的路由器对象添加到任何组件，这里是如何使用它：

import { withRouter } from 'next/router'

function Page({ router }) {
  return <p>{router.pathname}</p>
}

export default withRouter(Page)

https://nextjs.org/docs/api-reference/next/router#userouter

API 路由呢？如何在 Next.js API 路由中访问路由器实例？
2021-06-02 14:07:24

您可以使用asPath属性，该属性将为您提供浏览器中显示的路径（包括查询），而无需配置basePath或locale：

const { asPath } = useRouter()
asPath 是最好的解决方案。pathName 或 baseName 不适用于 getStaticPaths
2021-06-16 14:07:24
谢谢，它应该被标记为已接受的答案。
2021-06-21 14:07:24

假设一个页面的完整URL为'abc.com/blog/xyz'，与该路由匹配的组件文件名为'./pages/blog/[slug].js'

useRouter() hook 返回一个路由对象，它有两个属性来获取路径名。

  1. 一是asPath财产，

  2. 另一个是pathname财产。

asPath 属性包含从 URL 中提取的路径名，即 /blog/xyz

但pathname属性包含您的项目目录的路径名，即/blog/[slug].

示例实现

// .pages/blog/[slug].js

import { useRouter } from 'next/router';

const BlogSlug = () => {
  const { asPath, pathname } = useRouter();
  console.log(asPath); // '/blog/xyz'
  console.log(pathname); // '/blog/[slug]'
  return (
    <div></div>
  );
}

export default BlogSlug;
这对于路径名返回 404 但您想访问失败的 URL 的 404 页面非常有用。
2021-05-27 14:07:24

要完全使用 Next.js 提供的开箱即用的 SSR，您可以使用和 中context提供的对象getInitialProps，其中包含pathname. 然后您可以将其传递pathname给props您的组件用作 a 。

例如： 

class Page extends React.Component {
 static getInitialProps({ pathname }){
  return { pathname }
 }
 render() {
  return <div>{this.props.pathname === 'login' ? 'good' : 'not good'}</div>
 }
}
啊，明白了。该context对象已经在我的代码中使用{ pathname } .
2021-05-28 14:07:24
哪个上下文？你的例子没有任何上下文。
2021-06-09 14:07:24
原始问题也没有任何上下文
2021-06-20 14:07:24

无法访问 Router 或 useRouter() 选项来访问 app.js 文件中的当前路径。这不是客户端呈现的，因此访问您当前路径的唯一方法是将它从您的getInitialProps()或getServerSideProps()对您的 App 组件的调用传递，然后在那里访问它以根据当前路线开发您的逻辑。

其它你可能感兴趣的问题
上一篇如何使用 react-router 处理身份验证？ 下一篇找不到module：无法在 Next.js 应用程序中解析“fs”