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