>Lo que sucede es que marca la ruta en la url pero el contenido de la vista me lo renderiza en la misma vista de home

Con la configuración actual, cuando se quiere ocultar el componente `Home` enrutando hacia el componente `Test`, `Home` se vuelve a mostrar, pues esta posicionado encima de `<Routes>`, que es donde se especificó el contenido para cada ruta:

    function App() {
      return (
        <Fragment>
          <Home /> {/*Siempre se muestra*/}
          <NavBar />
          <Routes />{/*Luego están mis rutas*/}
        </Fragment>
      );
    }

Ya se configuró el contenido de la ruta "/", direcciona hacia el componente`Home`, esto dentro de `Routes`:

    class Routes extends React.Component {
      render() {
          return (
              <Switch>
                  <Route
                  path="/"
                  component={Home} exact/>
                  <Route
                  path="/test"
                  component={Test} />
              </Switch>
          );
      }
    }

Entonces, solo hay que reconfigurar el árbol de componentes iniciales en `App`:

    function App() {
      return (
        <Fragment>
          {/*<Home /> se quita, está demás*/}
          <Routes />{/*inicia el manejo de contenidos de las rutas*/}
          <NavBar />
        </Fragment>
      );
    }

Aquí un demo basado en tu código original:

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

    const Router = window.ReactRouterDOM.BrowserRouter;
    const Route =  window.ReactRouterDOM.Route;
    const Link =  window.ReactRouterDOM.Link;
    const Switch = window.ReactRouterDOM.Switch;

    function App(){
      return(
        <div>
        <ReactRouterDOM.HashRouter>
          <Routes />
          <NavBar />
        </ReactRouterDOM.HashRouter>
        </div>
      );
    }

    class Home extends React.Component {
      render() {
          return(
              <div className="home-container">
                <button><Link to='/test'>SIGN UP</Link></button>
              </div>
          );
      }
    }

    class Routes extends React.Component {
      render() {
          return (
              <Switch>
                  <Route
                  path="/"
                  component={Home} exact/>
                  <Route
                  path="/test"
                  component={Test} />
              </Switch>
          );
      }
    }

    class Test extends React.Component{
      render(){
        return (
          <div>
            <h3>Test</h3>
            <button><Link to='/'>Back to Home</Link></button>
          </div>
        );
      }
    }

    class NavBar extends React.Component{
      render(){
        return <h3>Navbar</h3>
      }
    }
     
     
    ReactDOM.render(<App/>, document.getElementById('root'))

<!-- language: lang-html -->

    <script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
        <script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
        <script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
        <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
        <script src='https://unpkg.com/[email protected]/babel.js'></script>
     

    <div id="root"></div>

<!-- end snippet -->

Espero que esta respuesta sea de ayuda.