Custom page not working when using T2M (React, TypeScrypt)

Code:
import React, { Component } from "react";

import { Switch, Route, Link, Redirect, HashRouter as Router, useLocation, useRouteMatch } from "react-router-dom";



function Home() {

  return (

    <div>

      <h2>Home</h2>

      {getRoutingInfo(useLocation(), useRouteMatch())}

    </div>

  );

}



function About() {

  return (

    <div>

      <h2>About</h2>

      {getRoutingInfo(useLocation(), useRouteMatch())}

    </div>

  );

}



function Users() {

  return (

    <div>

      <h2>Users</h2>

      {getRoutingInfo(useLocation(), useRouteMatch())}

    </div>

  );

}



function NoMatch(){

  let match = '/talk2mAccountName/DeviceName/';

  let location = useLocation();

  let routeMatch = useRouteMatch();



  if(location.pathname === '/' && routeMatch.path === match){

    return <Redirect to='/home' />

  }



  return (

    <div>

      <h2>No match for:</h2>

      {getRoutingInfo(location, routeMatch)}

    </div>

    );

}



function getRoutingInfo(location, match){

  return (

    <div>

      <h3>

        <ul>

          <li>Location: <code>{getLocationPath(location)}</code></li>

          <li>Router Match: <code>{getRouterMatch(match)}</code></li>

        </ul>

      </h3>

    </div>

  );

}



function getLocationPath(location){

  return location.pathname;

}



function getRouterMatch(match){

  return "[" + match.path + "] url: [" + match.url + "]";

}



class App extends Component {



renderNavBar(){

    return(

      <div className="container">

        <h1>Navigation bar</h1>

        <nav>

          <ul>

            <li>

              <Link to='/home'>Home</Link>

            </li>

            <li>

              <Link to='/users'>Users</Link>

            </li>

            <li>

              <Link to='/about'>About</Link>

            </li>

            <li>

              <Link to='/noMatch'>Will not match</Link>

            </li>

          </ul>

        </nav>

      </div>

    );

  }



  render(){

    return (

      <Router> {/* basename="usr/statsifier/machinex/RDHT/" | basename="/machinex/RDHT/" */}

        <div className="container">

          {this.renderNavBar()}

          <hr />



          {/*

            A <Switch> looks through all its children <Route>

            elements and renders the first one whose path

            matches the current URL. Use a <Switch> any time

            you have multiple routes, but you want only one

            of them to render at a time

          */}

          <Switch>

            <Route path='*/home' component={Home}/>

            <Route path='*/users' component={Users}/>

            <Route path='*/about' component={About}/>

            <Route>              

                <NoMatch/>

            </Route>

          </Switch>

        </div>

      </Router>

    );

  }

}



export default (App);