nextjs에서 URL 경로 이름 가져오기

nextjs에서 URL 경로 이름 가져오기

로그인 페이지와 레이아웃 컴포넌트가 있습니다.레이아웃 구성요소에 헤더가 있습니다.signin에 헤더를 표시하고 싶지 않습니다.그 때문에, url pathname을 취득하고 싶습니다.pathname에 근거해 header를 표시합니다.

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>
        )
    }
}

제발 도와주세요.

에 액세스 하고 싶은 경우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

사용할 수 있습니다.asPath속성: 를 설정하지 않고 브라우저에 표시되는 경로(쿼리 포함)를 제공합니다.basePath또는locale:

const { asPath } = useRouter()

페이지의 전체 URL이 'abc.com/blog/xyz'이고 이 경로와 일치하는 컴포넌트 파일 이름이 '.pages/filename/[filename]이라고 가정합니다.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;

Next.js에서 즉시 사용할 수 있는 SSR를 완전히 사용하려면context제공 대상getInitialProps그 중 하나는pathname그럼 이걸 넘겨주세요.pathname사용되다props컴포넌트별로 표시됩니다.

예를 들어 다음과 같습니다.

class Page extends React.Component {
 static getInitialProps({ pathname }){
  return { pathname }
 }
 render() {
  return <div>{this.props.pathname === 'login' ? 'good' : 'not good'}</div>
 }
}

늦을 수도 있지만 그냥 사용하세요.router.pathname

function MyComp() {
    const router = useRouter();

    return (
        <a className={router.pathname === '/some-path' ? 'currentCSS' : 'defaultCSS'}>
            Some link
        </a>
    );
}

app.js 파일의 현재 경로에 액세스하기 위해 라우터 또는 useRouter() 옵션에 액세스할 수 없습니다.이것은 클라이언트 측에서 렌더링된 것이 아니기 때문에, 현재의 패스에 액세스 할 수 있는 유일한 방법은, 현재의 패스로부터 패스하는 것입니다.getInitialProps()또는getServerSideProps()앱 컴포넌트를 호출하고 거기에 접속하여 현재 경로를 기반으로 로직을 개발합니다.

내 앱은 여러 개의 문서가 필요했기 때문에 경로 이름과 nextjs를 사용하여 기본 문서를 가져오는 방법을 찾고 있었습니다. 이것은 나에게 맞는 방법입니다.

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { LandingPage, WithSidePanels } from '../documents'

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }
    
    
    render() {
        console.log(this.props.__NEXT_DATA__.page)
        if(this.props.__NEXT_DATA__.page === "/") return <LandingPage />


        return (
           <WithSidePanels />
        )
    }
}

export default MyDocument

그렇게this.props.__NEXT_DATA__.page경로 이름, "/" 또는 "/contact" 또는 기타 기타 정보가 표시됩니다._document.js:)

예를 찾는 사용자:

import React, { Component } from "react";
import { withRouter } from 'next/router'

class Login extends Component {


    constructor(props) {
        super(props);
    }


    onClickHandler = (event) => {
        this.props.router.push('/newPage')

    }

    render() {
        return (

            <div>
                <p>Hello, {this.props.router.pathname}</p>
                <button onClick={this.onClickHandler}>Click me!</button>
            </div>
        );
    }
}

export default withRouter(Login);

nextjs에서 사용할 수 있는 'next/router'에서 라우터를 Import하지 않기 위해서입니다.

import {useRouter} from 'next/router';

언급URL : https://stackoverflow.com/questions/58022046/get-url-pathname-in-nextjs