Next.js中设置basePath时如何不使用Link获取路径

Question

next.js 文档中的

基本路径写道：

例如，当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

您可以利用

useRouter

中的

next/router

挂钩来访问应用程序的当前

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

Answer 2

Next.js 还有一个

addBasePath

功能：

import { addBasePath } from 'next/dist/client/add-base-path';

addBasePath('/about');