Reactjs 在 nextjs 中获取 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>
        )
    }
}

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

import { withRouter } from 'next/router'

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

export default withRouter(Page)

Reactjs相关问答推荐

LocalStore未存储正确的数据

无法在列表中看到文本

sourceBuffer. appendBuffer成功，但h5视频播放器卡住了

获取点击的国家/地区名称react 映射

React Context未正确更新

React：关于useEffect钩子如何工作的困惑

在数组对象内的数组上进行映射

使用experial_useFormState将参数传递给服务器操作

为什么React UseEffect挂钩在页面重新加载时运行

使用 React + Vite 范围化 CSS

在reactjs中刷新页面时丢失状态值

在 React-Select 中显示多值的倒序

如何在屏幕上使用相同的可重用 组件处理加载/禁用状态和单击多个按钮的功能？

使用状态与复选框不同步

React v6 中的公共和私有路由

有没有办法根据 Rechart 中的 activeDot 更改值？

如何使用react 路由将 url 参数限制为一组特定的值？

渲染的钩子比预期的少.这可能是由 React Hooks 中意外的提前返回语句引起的

在表格中显示具有自定义声明的用户状态

哪个是创建 React 应用程序的更好方法？