Reactjs/Nextjs- how to redirect to another page using NextJS

Question

I am using nextjs/reactjs and need some help on how to redirect to a page

Folder structure

-Pages

  -business

    -location.js

    -selectlocation.js

The URL =http://myhost/business/location?city=Pensacola&state=FL

When the argument is missing, I want to redirect to selectlocation

How do I route to the selectlocation page from the location page when the argument is empty

This is a snippet of my code for location.js

export default class extends Component {
    static getInitialProps({ query: { city, state } }) {
        return { city: city, state: state };
    }
    render() {
        return (
            <div>
                <Head>
                    <title>{title}</title>
                    <meta name="description" content={description} />
                </Head>

                <LayoutWithHeader
                    banner={false}
                    view="business"
                    link="location banner"
                    locationCity={this.props.city}
                    locationState={this.props.state}>
                    <Location />
                </LayoutWithHeader>
            </div>
        );

    }
}

Code for SelectLocation.JS

export default () => (
    <div>
        <Head>
            <title>Location</title>
        </Head>
        <LayoutWithHeader banner={true} title="Home / Business / Locations" >
            <SelectLocation />
        </LayoutWithHeader>
    </div>
);

Muhammad Ali · Accepted Answer · 2020-05-21 15:53:34Z

10

Sample routing code:

import { useRouter } from 'next/router'

function Home() {
  const router = useRouter()


  const handleClick = e => {
    e.preventDefault()
    router.push('/some-path')
  }

  return (
    <button type="button" onClick={handleClick}>
      Go Somewhere
    </button>
  )
}

Please see the docs for further details.

edited May 21, 2020 at 15:53

answered May 21, 2020 at 15:39

Muhammad Ali

2,6582 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2570135 Over a year ago

Thanks but I don't want a link for the user to select. I would like to route it automatically to the page in the pages folder based on a condition

user2570135 Over a year ago

Thanks. but I am looking at the URL .. if it has no argument then I want to redirect.. no button or link. automatically redirect.

Muhammad Ali Over a year ago

If you're using react hooks then you can make use of useEffect hook to achieve that. In case class components use getDerivedStateFromProps.

Aamjit Yanglem · Accepted Answer · 2024-04-10 07:08:53Z

A bit too late for the answer but from my experience, as of current practice, I would lay my folder structure as follows:

- (routes)
    - business
        - location
            - page.js
        - selectlocation
            - page.js

Here in business/location/page.js, as client component, you can add as

"use client";
import { useSearchParams, useRouter } from 'next/navigation';

export default function Location() {
  const searchParams = useSearchParams();
  const router= useRouter();
 
  const search = searchParams.get('<query_name>'); // use 'getAll()' for all parameters
 
  // URL -> `.../business/location/?city=<city>&state=<state>`
  // `search` -> '{city: <city>, state: <state>}'

  return search? // or specifically, search?.city? {..components}: {handle route}
    <>
       {...components}
    </>
    : router.push("/business/selectlocation")
}

Collectives™ on Stack Overflow

Reactjs/Nextjs- how to redirect to another page using NextJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related