将所有`*`重定向到nextjs中的特定路径

Question

我有一个单一的着陆页 nextJs 应用程序可以将所有 * 重定向到特定的路由，就像我们在 react-router 中所做的那样，我怎样才能做到完全相同nextJs

    <BrowserRouter>
      <Routes>
        <Route path={ROUTES.ROOT} element={<Registry />} />
        <Route path={ROUTES.ALL} element={<Navigate to={ROUTES.ROOT} />} />
      </Routes>
    </BrowserRouter>

export const ROUTES = {
  ALL: '*',
  ROOT: '/registry',

};

到目前为止我所做的是我能够将特定路由重定向到特定路由但无法将所有路由重定向到特定路由

const nextConfig = {
  async redirects() {
    return [
      {
        source: '/path', // not able to "*" the route
        destination: '/registry', // Matched parameters can be used in the destination
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

Answer 1

不幸的是，nextJs 似乎没有正确的方法来处理 nextConfig 中的这种重定向，但是如果你想将任何 404 页面重定向到主页，你可以做的是：

在页面中创建自定义 404 页面，请注意您的页面必须命名为 404
在 404 文件中添加此代码段。

import { useEffect } from 'react'
import { useRouter } from 'next/router'
export default function Custom404() {
  const router = useRouter()

  useEffect(() => {
    router.replace('/')
  })

  return null
}

因此，任何未找到的路由都应重定向到主页。 See this discussion on github

编辑： 最后一件事，如果你想在用户访问某个路由时处理某种逻辑并在失败时重定向，你可以使用 getServerSideProps:

在页面中添加异步函数 getServerSideProps 在呈现页面之前要处理某种逻辑的页面：

// Page where you want to handle the logic
// data is the props that comes from getServerSideProps
function Page({ data }) {
  // Render data...
}


// This gets called on every request
export async function getServerSideProps() {
  // fetch some data from external API
  const res = await fetch(`https://someapi/fetchData`)
  const data = await res.json()
  
  if(!data) {
    // Here we redirect the user to home if get some error at the API
    return {
      redirect: {
        destination: '/',
        permanent: false
      }
    }
  }

  // Otherwise pass the data to Page as props
  return { props: { data } }
}
export default Page

这只是一个例子，但你明白了，如果你想了解更多，read the docs here

将所有`*`重定向到nextjs中的特定路径

redirect all `*` to specific path in nextjs

javascript

reactjs

next.js