您可以使用withRouter HOC Package 组件，这将注入router对象，该对象具有当前pathname。

import { withRouter } from 'next/router';

const Admin = ({ router }) => (
  <AdminLayout>
    <style global jsx>
      {`
        body {
          background: #eff0f3;
        }
      `}
    </style>
    <div className="jumbotron" style={jumbotron}>
      {router.pathname == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}
    </div>
  </AdminLayout>
);

export default withRouter(Admin);

字符串

使用Hooks

如果你喜欢钩子，你可以使用useRouter钩子。

import { useRouter } from 'next/router';

const Admin = () => {
const router = useRouter();

return (
  <AdminLayout>
    <style global jsx>
      {`
        body {
          background: #eff0f3;
        }
      `}
    </style>
    <div className="jumbotron" style={jumbotron}>
      {router.pathname == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}
    </div>
  </AdminLayout>);
};

export default Admin;

型
router.pathname将包含“config”URL，因此对于动态路由，它将包含[paramName]部分。

动态路由

您可以检查router.query是否存在动态部分。

import { useRouter } from 'next/router';

// assume that your dynamic route us `/static/[dynamicPart]`

const Admin = () => {
const router = useRouter();

return (
  <AdminLayout>
    <style global jsx>
      {`
        body {
          background: #eff0f3;
        }
      `}
    </style>
    <div className="jumbotron" style={jumbotron}>
      {router.query.dynamicPart == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}
    </div>
  </AdminLayout>);
};

export default Admin;

型

使用AppDir路由器的NextJS 13

https://nextjs.org/docs/app/api-reference/functions/use-pathname

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

字符串