Как получить URL, введенный в адресную строку с сервера в NextJS? - PullRequest
0 голосов
/ 06 октября 2018

Я работаю в 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 перед первым компонентомрендеринг?У кого-нибудь есть подсказка?Было бы здорово,

спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...