How to create react-router-dom subpages?

Question

React

Hello everyone, I don't know how to create subpages, I use react-router-dom.

for example, I go to /profile,
and /profile should have a switch and two components /user , /balance-history.
To make the full path look like /profile/user , /profile/balance-history.

the code

class Main extends Component{

  render(){
    return (
      
      <Switch>
                ...
        <Route path="/profile"    component={Profile} />
      </Switch>

    )
  }

}


function Profile(props){

  let { path, url } = useRouteMatch();

  return(
    <div className="page profile-page">
      
      <LoggedControl noLoggedRedirect={true} />
      <Redirect to={`${url}/user`} />

      <SwitchLinks links={ [

        {
          link   : `${url}/user`,
          text   : 'Кабинет'
        },
        {
          link   : `${url}/balance-history`,
          text   : 'Платежи'
        }

      ]}/>

      <Switch>
        <Route path={`${path}/:topic`} component={Control} />
      </Switch>

    </div>
  )

}



function Control(props){
  let { topic } = useParams();

  if ( topic == 'user' ) return <User />
  if ( topic == 'balance-history' ) return <BalanceHistory />
}

Now everything works, but it seems to me not right.

And besides, sometimes there are problems:
with a direct transition, for example /profile/user ,
in the User component I don’t get the value from the redux