在 Next.js 中设置 basePath 时如何在不使用 Link 的情况下获取路径

Question

next.js 文档中的Base Path 写道：

例如，当 basePath 设置为 /docs 时，使用 /about 会自动变为 /docs/about。

export default function HomePage() {
 return (
   <>
     <Link href="/about">
       <a>About Page</a>
     </Link>
   </>
 )
}

我可以根据我提供的路径生成路径，而不使用Link 元素吗？

---

以下是我的next.config,js。

module.exports = {
  reactStrictMode: true,
  basePath: '/Some_Folder',
  trailingSlash: true,
}

我在 Next.js 项目中有一个简单的页面，位于 pages 文件夹下。

import Link from 'next/link';

import firebase from '../common/firebase_init';
import 'firebase/auth';

import { useState, useEffect } from 'react';

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

export default function App(props) {
  const [showLoginDialog, setShowLoginDialog] = useState(false);
  useEffect(() => {
    const unsub = firebase.auth().onAuthStateChanged(user => {
      if (!user) setShowLoginDialog(true);
    });

    return () => {
      unsub();
    }
  });

  const uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: '../', 
    // This is a path that Firebase jumps to after signing in is successful
    // '../' is the relative path, but I may move this page to a new location, 
    // or even share the code across different pages.
    //
    // So, I want to write "/" here and have Next.js Generate a correct path for me.
    // something like getLink("/")
    signInOptions: [
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
  };

  return <div id="login-container">
    {showLoginDialog ? <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} /> : null}
    <Link href="/">
      <a>Go Back</a>
    </Link>
  </div>;
}

我想在上面的代码中为signInSuccessUrl: '../',生成一个路径。

原因是，'../' 是相对路径，但我可能会将此页面移动到新位置，甚至可以在不同页面之间共享代码（例如创建一个类）。

如果我能有 getLink("/") 这样的东西就好了。

Answer 1

您可以利用next/router 中的useRouter 挂钩来访问您应用的当前basePath。

import { useRouter } from 'next/router';

export default function App(props) {
    const router = useRouter();
    const getLink = (path) => `${router.basePath}${path}`;

    console.log(getLink('/about')); // Will log `/your-base-path/about

    // Remaining code...
}