Next.js页面加载前如何拦截路由器

Question

I'm currently using a custom app _app.ts in my Next project.

// import App from 'next/app'

import { useEffect } from "react"
import Router from 'next/router'

function MyApp({ Component, pageProps }) {
    useEffect(() => {
        const handleRouteChange = url => {
          console.log('App is changing to: ', url)
        }

        Router.events.on('routeChangeStart', handleRouteChange)
        return () => {
          Router.events.off('routeChangeStart', handleRouteChange)
        }
    }, [])


    return <Component {...pageProps} />
  }

  // Only uncomment this method if you have blocking data requirements for
  // every single page in your application. This disables the ability to
  // perform automatic static optimization, causing every page in your app to
  // be server-side rendered.
  //
  // MyApp.getInitialProps = async (appContext) => {
  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
  //   const appProps = await App.getInitialProps(appContext);
  //
  //   return { ...appProps }
  // }

  export default MyApp

It seems that if i do a hard reload so if enter localhost:3000/ in the browser, the event never fires. If I enter localhost:3000/test it also never fires.

It seems that it will only fire on Route.push calls or <link> calls

Is there anyway to "intercept" the routes so that I can to redirect users on certain conditions on certain routes if they enter the route on the browser?

Answer 1

next/router is a client-side router. When you reload a page or enter the address in a browser, the request is handled by the server, so you wouldn't see events like routeChangeStart .

You can implement client-side redirecting that would work with both client-side and server-side routing.

Client-side redirect:

const router = useRouter();

useEffect(() => {
  router.push('/redirectLocation');
}, [])

If you need to make redirect on a server side before it responds to a browser, you would have to implement a custom server.

Custom Server

Answer 2

I'm currently using a custom app _app.ts in my Next project.

// import App from 'next/app'

import { useEffect } from "react"
import Router from 'next/router'

function MyApp({ Component, pageProps }) {
    useEffect(() => {
        const handleRouteChange = url => {
          console.log('App is changing to: ', url)
        }

        Router.events.on('routeChangeStart', handleRouteChange)
        return () => {
          Router.events.off('routeChangeStart', handleRouteChange)
        }
    }, [])


    return <Component {...pageProps} />
  }

  // Only uncomment this method if you have blocking data requirements for
  // every single page in your application. This disables the ability to
  // perform automatic static optimization, causing every page in your app to
  // be server-side rendered.
  //
  // MyApp.getInitialProps = async (appContext) => {
  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
  //   const appProps = await App.getInitialProps(appContext);
  //
  //   return { ...appProps }
  // }

  export default MyApp

It seems that if i do a hard reload so if enter localhost:3000/ in the browser, the event never fires. If I enter localhost:3000/test it also never fires.

It seems that it will only fire on Route.push calls or <link> calls

Is there anyway to "intercept" the routes so that I can to redirect users on certain conditions on certain routes if they enter the route on the browser?