Question

我是nextjs的新手。我有一个使用reactjs和nextjs的项目。我需要通过单击弹出窗口中的“取消”按钮返回首页（通过道具将方法传递给组件）。

我在推入路线后已经尝试过window.location.reload，但是它没有帮助，在重新加载页面之后，它使我回到想要离开的页面（到Product组件）。我究竟做错了什么？

import { Component } from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import { updateProductInCart } from 'store/modules/cart/operations'

import api from 'api'

import { Router } from 'server/routes'

import { Consumer as ResizeNotifier, screenSize } from 'components/common/ResizeNotifier'


class Product extends Component<any, any> {
  state = {
    product: null,
    isLoading: false,
    isModalVisible: true,
    isAdult: true
  }

  componentDidMount() {
    const { shopId, productId } = this.props

    api.product.fetchProduct(shopId, productId).then((product) => {
      this.setState({ product })
    })

      .then(() => {
        api.shopInfo.getShopInfo(
          shopId,
        )
          .then((response) => {
            response.isAdult && this.setState({
              isModalVisible: true,
              isAdult: response.isAdult
            })
          })
          .catch(error => console.error(error))
      })
  }

  routeChange = () => {
    Router.pushRoute('/')

    window.location.reload();
  }

  handleModalVisible = () => {
    this.setState(prevState => ({
      isModalVisible: !prevState.isModalVisible
    }))
  }

  render() {

    return (
      <ResizeNotifier>
        {({ size: veiwportSize }) => (
          <section>
            {this.state.isAdult && this.state.isModalVisible && (
              <AdultCheckModal modalState={this.routeChange} onShopSelect={this.handleModalVisible} />
            )
            }
          </section>
        )}
      </ResizeNotifier>
    )
  }
}

AdultCheck模式组件的一部分：

      <AdultCheckModalContent>
        <AdultCheckContent modalState={props.modalState} shopId={props.shopId} onShopSelect={props.onShopSelect}/>
      </AdultCheckModalContent>
    </Modal>
  )
}

我希望在组件中传递routeChange函数，路由器会更改，页面将被重新加载，我在做什么错？

使用下一路线的路线和window.location.reload问题（在React上完成的项目）

0 个答案: