Question

我正在使用NextJS，并将根据地址栏中输入的URL进行一些操作-我想根据输入的URL创建布局。当前，我正在使用getInitialProps，但是似乎首先将组件渲染了一次，然后出现了getInitialProps方法，然后使用正确的布局重新渲染了组件。这会在标准布局下创建一个轻微的闪光灯，然后出现自定义的布局，这显然很丑陋，因此我将消除这种滞后于布局的微小闪光灯。

我的方法使用在地址栏中输入的URL触发Redux动作，以设置输入的URL的值，然后根据该值来释放特定的布局。

这是我的getInitialProps.js：

// import storeWrapper from "../HOC/storeWrapper/storeWrapper"
import {connect} from 'react-redux';
import {setPathAction} from  "../../state/actions/setPathAction";

const initialPropser =  (WrappedComponent) => 
  class extends React.Component {
    static async getInitialProps( {pathname}) {
      console.log("pathname in initial props: ", pathname)
      // WrappedComponent.props.setPathAction(this.props.pathname) // set the URL entered in adress bar vie a Redux action
      return pathname 
    }
    render() {

      return <WrappedComponent pathname={this.props.pathname} />
    }
  }

  const mapDispatchToProps = {
    setPathAction
  }

  connect(null, mapDispatchToProps)(initialPropser)
export default initialPropser

这是我的page.js片段：

 static getDerivedStateFromProps(props, state){ 
    console.log("this.props in getDerivedStateFromProps", props)
  }

  componentDidMount(){     
    this.props.setPathAction(this.props.pathname || document.location.href.replace("http://localhost:4000",''))
    this.props.setHeadlineAction(this.state)
  }

如何使此操作在呈现第一个组件之前接收正确的URL？有人暗示吗？会很棒，

谢谢

如何从NextJS的服务器中获取在地址栏中输入的URL？

0 个答案: