How to get URL parameteres in constructor() function?

[schwarzsky]

How to get id from chat/id url in constructor() function? I need to use in constructor() because i am listening socket events on constructor(), if i use any other function i can't listen socket events or i can't setstate for realtime update.

If you have any suggestions about code, system or anything i can think some new things.

import React, {useEffect} from 'react'
import cookie from 'js-cookie'
import io from 'socket.io-client'
let socket = io('http://localhost:3090')

import {withRouter} from 'next/router'

import Messages from '../../components/Messages'

class Chat extends React.Component {
    constructor(query){
        super();

        // I wanna get query parameter.

        this.state = {
            Messages: [],
            loading: 0
        }

        socket.on('connect', function(){
            socket.emit('set', {uuid: cookie.get('uuid')})

            console.log(cookie.get('uuid') + " " + query.id);

            socket.emit('getpms', {uuid: cookie.get('uuid'), sender: query.id})

            console.log('[Socket] Connected!')
        }.bind(this))
        
        socket.on('pm', function(message){
            socket.emit('getpms', {uuid: cookie.get('uuid')});
        }.bind(this))

        socket.on('getpms', function(data){
            this.setState({
                Messages: data.data,
                loading: 1
            });

            console.log(data);
        }.bind(this))
    }

    static getInitialProps({query}){
        return {query}
    }

    render(){
        if(this.state.loading){
            return(
                <>
                    <ul>
                        <Messages data={this.state.Messages} />
                    </ul>
                    <style jsx>{`
                        ul {
                            width: 100%;
                            height: 100vh;
                            position: relative;
                        }
                    `}</style>
                </>
            )
        } else {
            return(<span>yükleniyor</span>)
        }
    }
}

export default withRouter(Chat)

[jamesmosier]

You can get the router object from props like this in the constructor:

class Chat extends React.Component {
  constructor(props) {
    super(props);
    console.log(props.router);

but props.router.query is not possible to get within the constructor. The reason is because (from the docs):

Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).

With that said, you may want to search for some examples with socket io and React Hooks such as this one. Then you'd be able to use useEffect and wait until router.query is present and then start your socket io connections.