Hi i'm new in web developpement i'm studying in a adult school to change my career my question is simple i'm developping my end of the year project and doing it with react JS i'm comfortable with class component, i needed to acess URL params with class component so i did this:

import React from "react";
import {Component} from "react";
import {useParams} from "react-router-dom"

export default function ParamsReader(){
    return <CategoriesComponent params={useParams()}/>
}
class CategoriesComponent extends React.Component{
    constructor(props){
        super(props)
        this.state={

        }
    } componentDidMount(){
        console.log(this.props.params);
        Object.entries(this.props.params).map((param)=>(
            console.log(param[1])

        ))
    } render(){

        return(
            <div>
                <h1>HELLO</h1>
            </div>
        )
    }
}

this is working i can acces what i need (the componentDidMount is just here to check what i retrieve in my class) but my question is: is it a good practice? BOth of the function and the class are in the file should i slplit them in différent files? thanks for youres answers