在nextjs中获取URL路径名

时间：2019-09-20 05:02:26

标签： reactjs next.js

我有一个登录页面和布局组件。布局组件具有标头。我不想在登录中显示标头。为此，我想获取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>
        )
    }
}

请帮助

9 个答案:

答案 0 :(得分：9)

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

const { asPath } = useRouter()

答案 1 :(得分：1)

如果您想访问应用程序中任何功能组件内的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://github.com/zeit/next.js/#userouter

答案 2 :(得分：1)

要完全使用Next.js提供的现成的SSR，可以使用unmount("/system"); unmount("/data"); unmount("/preload"); ui_print(" "); ui_print("Android 6.0 & 7.0 Debloat Script by Windforce0511"); ui_print("Script version: v1"); ui_print(" "); ui_print("Mounting partitions: /system /data /cache"); run_program("/sbin/mount", "-t", "auto", "/system"); run_program("/sbin/mount", "-t", "auto", "/data"); run_program("/sbin/mount", "-t", "auto", "/cache"); ui_print("Partitions mounted"); ui_print(" "); ui_print("Removing bloatware from /system/app"); run_program("/sbin/rm", "-rf", "system/app/AASAservice"); run_program("/sbin/rm", "-rf", "system/app/BluetoothMidiService"); run_program("/sbin/rm", "-rf", "system/app/CloudGateway2017"); run_program("/sbin/rm", "-rf", "system/app/GooglePrintRecommendationService"); run_program("/sbin/rm", "-rf", "system/app/FlipboardBriefing"); run_program("/sbin/rm", "-rf", "system/app/KnoxFolderContainer2"); run_program("/sbin/rm", "-rf", "system/app/KnoxRemoteContentsProvider"); run_program("/sbin/rm", "-rf", "system/app/Photos"); run_program("/sbin/rm", "-rf", "system/app/SBrowser_5.0"); run_program("/sbin/rm", "-rf", "system/app/ShareLink"); run_program("/sbin/rm", "-rf", "system/app/SPrintSpooler7"); run_program("/sbin/rm", "-rf", "system/app/Videos"); run_program("/sbin/rm", "-rf", "system/app/ANTPlusPlugins"); run_program("/sbin/rm", "-rf", "system/app/ANTPlusTest"); run_program("/sbin/rm", "-rf", "system/app/ANTRadioService"); run_program("/sbin/rm", "-rf", "system/app/AdvSoundDetector2015"); run_program("/sbin/rm", "-rf", "system/app/AllShareCastPlayer"); run_program("/sbin/rm", "-rf", "system/app/AllshareFileShare"); #run_program("/sbin/rm", "-rf", "system/app/EasyOneHand3"); run_program("/sbin/rm", "-rf", "system/app/FlipboardBriefingPanel"); run_program("/sbin/rm", "-rf", "system/app/Music2"); run_program("/sbin/rm", "-rf", "system/app/QuickConnect_40"); run_program("/sbin/rm", "-rf", "system/app/BBCAgent"); run_program("/sbin/rm", "-rf", "system/app/SBrowser_4_LATEST"); run_program("/sbin/rm", "-rf", "system/app/ColorBlind_M"); run_program("/sbin/rm", "-rf", "system/app/SecMemo3"); run_program("/sbin/rm", "-rf", "system/app/SimpleSharing"); ui_print("Done!"); ui_print(" "); ui_print("Removing bloatware from /system/priv-app"); run_program("/sbin/rm", "-rf", "system/priv-app/AutoPreconfig"); run_program("/sbin/rm", "-rf", "system/priv-app/AccessControl_N"); run_program("/sbin/rm", "-rf", "system/priv-app/AutomationTest_FB"); run_program("/sbin/rm", "-rf", "system/priv-app/CallLogBackup"); run_program("/sbin/rm", "-rf", "system/priv-app/AssistantMenu_N"); run_program("/sbin/rm", "-rf", "system/priv-app/AxelSpringer"); run_program("/sbin/rm", "-rf", "system/priv-app/BeaconManager"); run_program("/sbin/rm", "-rf", "system/priv-app/ColorBlind_N"); run_program("/sbin/rm", "-rf", "system/priv-app/EasySetup"); #run_program("/sbin/rm", "-rf", "system/priv-app/GalaxyApps_3xh"); run_program("/sbin/rm", "-rf", "system/priv-app/GalaxyAppsWidget_Phone"); run_program("/sbin/rm", "-rf", "system/priv-app/GameHome"); run_program("/sbin/rm", "-rf", "system/priv-app/GameTools"); run_program("/sbin/rm", "-rf", "system/priv-app/OneDrive_Samsung_v2"); run_program("/sbin/rm", "-rf", "system/priv-app/PreloadInstaller"); #run_program("/sbin/rm", "-rf", "system/priv-app/SamsungAccount_Dream"); run_program("/sbin/rm", "-rf", "system/priv-app/SamsungCloud"); run_program("/sbin/rm", "-rf", "system/priv-app/SamsungMagnifier3"); run_program("/sbin/rm", "-rf", "system/priv-app/SamsungPass_1.1"); run_program("/sbin/rm", "-rf", "system/priv-app/SecEmail_N"); run_program("/sbin/rm", "-rf", "system/priv-app/SecureFolderStub"); run_program("/sbin/rm", "-rf", "system/priv-app/SFinder_v6"); run_program("/sbin/rm", "-rf", "system/priv-app/SNS_v2_N"); run_program("/sbin/rm", "-rf", "system/priv-app/SVoice"); run_program("/sbin/rm", "-rf", "system/priv-app/SvoicePLM"); run_program("/sbin/rm", "-rf", "system/priv-app/VoiceNote_5.0"); run_program("/sbin/rm", "-rf", "system/priv-app/VoiceNote_4.0"); run_program("/sbin/rm", "-rf", "system/priv-app/Fmm"); run_program("/sbin/rm", "-rf", "system/priv-app/FotaAgent"); run_program("/sbin/rm", "-rf", "system/priv-app/GalaxyBeta"); run_program("/sbin/rm", "-rf", "system/priv-app/GearManager"); run_program("/sbin/rm", "-rf", "system/priv-app/GoogleFeedback"); run_program("/sbin/rm", "-rf", "system/priv-app/HwModuleTest"); run_program("/sbin/rm", "-rf", "system/priv-app/ImsLogger+"); run_program("/sbin/rm", "-rf", "system/priv-app/KLMSAgent"); run_program("/sbin/rm", "-rf", "system/priv-app/LiveBroadcast"); run_program("/sbin/rm", "-rf", "system/priv-app/MyPlaces_Hero"); run_program("/sbin/rm", "-rf", "system/priv-app/PhoneErrService"); run_program("/sbin/rm", "-rf", "system/priv-app/PowerPoint_SamsungStub"); run_program("/sbin/rm", "-rf", "system/priv-app/RNB"); run_program("/sbin/rm", "-rf", "system/priv-app/RNBShell"); run_program("/sbin/rm", "-rf", "system/priv-app/sCloudBackupAppMOSUpgrade"); run_program("/sbin/rm", "-rf", "system/priv-app/SCloudService"); run_program("/sbin/rm", "-rf", "system/priv-app/SKSMAgent"); run_program("/sbin/rm", "-rf", "system/priv-app/SNS_v2"); run_program("/sbin/rm", "-rf", "system/priv-app/SOAgent"); run_program("/sbin/rm", "-rf", "system/priv-app/SPDClient"); run_program("/sbin/rm", "-rf", "system/priv-app/SPPPushClient_Prod"); run_program("/sbin/rm", "-rf", "system/priv-app/SVoiceLang_EnglishPack_GB_1.0"); run_program("/sbin/rm", "-rf", "system/priv-app/SVoiceLang_EnglishPack_US_1.0"); run_program("/sbin/rm", "-rf", "system/priv-app/SVoiceLang_FrenchPack_1.0"); ui_print("Done!"); ui_print(" "); ui_print("Cleaning Cache and Dalvik-cache"); delete_recursive("/cache"); delete_recursive("/data/dalvik-cache"); ui_print("Unmounting partitions: /system /data /cache"); unmount("/data"); unmount("/cache"); unmount("/system"); ui_print(" "); ui_print("Enjoy smoothness and much better battery life! :)"); ui_print(" "); ui_print(" "); ui_print("You can easily edit script and add character ' # ' to exclude certain APP from deleting."); ui_print(" "); ui_print("############################################"); 中提供的context对象，其中包含getInitialProps。然后，您可以将此pathname传递给组件，以用作pathname。

例如：

props

答案 3 :(得分：0)

您可以像这样在window.location或componentDidMount()中使用componentDidUpdate()：

componentDidMount() {
  this.currentUrl = window.location;
}

答案 4 :(得分：0)

为谁搜索示例：

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

答案 5 :(得分：0)

可能避免在nextjs中使用从'next / router'导入Router 您可以使用

import {useRouter} from 'next/router';

答案 6 :(得分：0)

可能会迟到但是......

function MyComp() {
  const router = useRouter();
  const [currentPath, setCurrentPath] = React.useState('');
  React.useEffect(() => setCurrentPath(router.pathname), []);

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

答案 7 :(得分：0)

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

答案 8 :(得分：0)

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

DateTime ax= DateTime.now(); print(ax); String a = "amount=100.00&Content-Type=application/json&item_name=#000001&merchant_id=10000100&merchant_id=10000100&merchant_key=46f0cd694581a&timestamp=$ax&version=v1"; md5.convert(utf8.encode(a)).toString(); //String pkistring = v1hashing(requeststr); HttpClient httpClient = new HttpClient(); HttpClientRequest request = await httpClient.postUrl(Uri.https( "sandbox.payfast.co.za", "/eng/process​")); request.headers.set('Content-Type' , 'application/json'); request.headers.set('merchant-id' , '10000100'); request.headers.set('version' , 'v1'); request.headers.set('timestamp' , ax); request.headers.set('signature' , md5.convert(utf8.encode(a)).toString()); //headers //request.headers.set('Accept' , 'application/json'); Map body = { 'merchant_id' : '10000100', 'merchant_key' : '46f0cd694581a', 'amount' : '100.00', 'item_name' : '#000001', 'signature': '${md5.convert(utf8.encode(a)).toString()}'} ; //body request.add(utf8.encode(json.encode(body))); //response cevap HttpClientResponse response = await request.close(); print(response.statusCode); // baglanti yapildi mi yapilmadi mi 200 ise yapildi String reply = await response.transform(utf8.decoder).join(); //Map responseMap = json.decode(reply); httpClient.close(); print("payfast ici odeme"); print(reply); Navigator.push(context, MaterialPageRoute(builder: (context) => new a3dsecure(reply))); 钩子返回一个路由对象，它有两个属性来获取路径名。

  1. 一个是 useRouter() 属性，并且

  2. 另一个是 asPath 属性。

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

但 /blog/xyz 属性包含项目目录的路径名，即 pathname。

示例实现

/blog/[slug]
相关问题
最新问题