Reactjs / Nextjs-如何使用NextJS重定向到另一个页面

时间:2020-05-21 15:36:10

标签: reactjs next.js

我正在使用nextjs / reactjs,并且需要一些有关如何重定向到页面的帮助

文件夹结构

-Pages

  -business

    -location.js

    -selectlocation.js

URL = {http://myhost/business/ 位置?city = Pensacola&state = FL

缺少参数时,我想重定向到 selectlocation

当参数为空时如何从位置页面路由到selectlocation页面

这是我的 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>
        );

    }
}

SelectLocation.JS的代码

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

1 个答案:

答案 0 :(得分:0)

示例路由代码:

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

有关更多详细信息,请参见docs