Nested Routes: React Router

import react, { useState } from "react";
import { Switch, Route, Redirect} from "react-router-dom";
const App = ()=>{
      return (
           <Switch>
                  <Route path="/" exact component={Home} />
                    <Route path="/services" component={Service} /> 
          </Switch>
     )
}
export default App;
///////////////////////////////////////////////////////////////////
import {userouteWatch} from   from "react-router-dom"; 
const {path, url} =  userouteWatch ();
const Child= ()=>{
      return (
           <>
                 <Link to={`${url}/1234`} ></Link>
                  <Route path={`${path}/:id`} exact component={Home} />
                    <Route path="/services" component={Service} /> 
          </>
     )
}
export default  Child 
/////////////////////// Conditions ////
const Child= ()=>{
      return (
           <>    <Route path={path} >
                 <Link to={`${url}/1234`} ></Link>
                  </Route>
                  <Route path={`${path}/:id`} exact component={Home} />
                    <Route path="/services" component={Service} /> 
          </>
     )
}
export default  Child