reactjs router.push不重定向到定义的路径，而是加载当前页面

我是NextJS的新手，我陷入了需要将数据从当前页面传递到另一个页面的情况，而不是在router中加载定义的路径。push是pathname: "/booking/checkout/"，但它加载当前页面。
我需要将GatherAllData()函数中的数据传递到另一个页面以处理目标页面中的数据。当我点击有onClick{()=>passData()的Proceed按钮来加载有路由器的功能时.推到http：//localhost：3000/booking/checkout？数据，它被重定向到它自己的页面（http：//localhost：3000/booking/details/3？数据）
下面是我的代码：
details/[id]/index.tsx

import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';
import Hotel from '../../../../src/api/booking/booking';
import { useEffect, useState } from 'react';
import Container from 'react-bootstrap/Container';
import ListGroup from 'react-bootstrap/ListGroup';
import Form from 'react-bootstrap/Form';
import Layout from '@/src/components/layout';
import { useRouter } from 'next/router';
import 'bootstrap/dist/css/bootstrap.min.css'
import Carousel from 'react-bootstrap/Carousel';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Modal from 'react-bootstrap/Modal';
import React, {useRef} from 'react';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Link from 'next/link'

export default function HotelDetails(){

    const router = useRouter();

    const {id} = router.query;

    ...

    const GatherAllData = () => {
        return (
            {
                "fullname": formvalues['fullname'],
                "email": formvalues['email'],
                "phone": formvalues['phone'],
                "accountnumber": formvalues['accountnumber'],
                "check_in": values.check_in,
                "check_out": values.check_out,
                "voucher_applied": values3,
                "total_discount": currencyFormatter.format(totalDiscount),
                "payment_method": selectedpayment,
                "add_on_id": addOnAdded()[1],
                "add_on_name": addOnAdded()[0],
                "grand_total": priceList(id)
            }
        )
    }

    const passData = () => {
        router.push({
            pathname: "/booking/checkout/",
            query: GatherAllData()
        })
    }

    return(
        <Layout>   
                
                ...

                  <Button variant='success' type='submit' onClick{()=>passData()}>Proceed</Button>
                                        
                ...
)}

checkout/index.tsx

import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';
import Hotel from '../../../src/api/booking/booking';
import { useEffect, useState } from 'react';
import Container from 'react-bootstrap/Container';
import ListGroup from 'react-bootstrap/ListGroup';
import Form from 'react-bootstrap/Form';
import Layout from '@/src/components/layout';
import { useRouter } from 'next/router';
import 'bootstrap/dist/css/bootstrap.min.css'
import Carousel from 'react-bootstrap/Carousel';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Modal from 'react-bootstrap/Modal';
import React, {useRef} from 'react';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';

export default function HotelCheckout(){
   
    const router = useRouter();

    console.log(router.query)

    return(
        <Layout>
            <Container>
                <Row>
                    <h1>Hello, World!</h1>
                </Row>
            </Container>
        </Layout>
    )

}

pages文件夹下的index.tsx

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import Layout from '@/src/components/layout'
import 'bootstrap/dist/css/bootstrap.min.css'
import HotelList from './booking'
import HotelDetails from './booking/details/[id]'
import HotelCheckout from './booking/checkout'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <div>
      <Layout>
        <HotelList/>
      </Layout>
    </div>
  )
}

我的项目页面文件夹结构

我想当我点击Proceed按钮它的重定向到预订/结帐页面，并通过从预订/[id]/细节/index.tsx到预订/结帐/index. tsx的数据.

“成功”按钮是type="submit"。所以我怀疑这里有一个form元素正在重新加载页面，例如。import Form from 'react-bootstrap/Form';。

<Button
  variant='success'
  type='submit' // <-- submit button
  onClick{passData}
>
  Proceed
</Button>

有几个选项：

在form元素的onSubmit处理程序上，您应该在onSubmit事件对象上调用preventDefault，以防止发生导致页面在当前URL路径上重新加载的默认表单操作。

如果有一个提交处理程序，那么这也是您希望放置导航逻辑的地方。

const onSubmit = e => {
  e.preventDefault(); // <-- don't submit the form!

  ... the rest of the submit logic ...

  router.push({
    pathname: "/booking/checkout/",
    query: GatherAllData()
  });
};

<Form onSubmit={onSubmit}>
  ...

  <Button
    variant='success'
    type='submit'
  >
    Proceed
  </Button>

  ...
</Form>

如果不涉及任何form元素，或者可能在ReactTree中有一个更高的呈现，并且您***实际上不想***使用此按钮提交表单，则指定该按钮***不是***提交按钮

<Button
  variant='success'
  type='button' // <-- regular old button
  onClick{passData}
>
  Proceed
</Button>

reactjs router.push不重定向到定义的路径，而是加载当前页面

1条答案

相关问题

热门标签

最新问答