Después de crear la barra de navegación superior de mi aplicación, intenté agregarle un botón que vinculará a un sitio web que creé y lo mostrará en el cuerpo de mi aplicación. El sitio web que busco indexar es en realidad un motor de búsqueda integrado en Python que permite al usuario ingresar palabras clave en la barra de búsqueda y obtener resultados. Esto es lo que estoy tratando de conseguir

la flecha muestra dónde debe aparecer el sitio sin que desaparezca la barra de navegación. Luego inserté el siguiente código en mi archivo de código de barras de navegación superior:

 <Button component={NavLink} activeClassName={classes.activeBtn} to="https://gkwhelps.herokuapp.com" className={classes.buttonItemMiddle} > {location.pathname == 'https://gkwhelps.herokuapp.com' ? ( <Home fontSize="large" style={{ color: 'rgb(0,133,243)' }} /> ) : ( <HomeOutlined fontSize="large" /> )} </Button>

y esto en mi archivo App.js :

 <ProtectedRoute exact path="https://gkwhelps.herokuapp.com" />

Mi aplicación funciona bien en mi navegador, pero cuando hago clic en el botón que indexa el otro sitio, el cuerpo de mi aplicación muestra una página en blanco (pero mi barra de navegación permanece visible) y me llevan al siguiente http://localhost:3000/https://gkwhelps.herokuapp.com por mi aplicación. No recibo ningún error de línea de comando. Así que me inspiré en la siguiente pregunta de askcodez y modifiqué mi código para el botón de esta manera:

 <Link to='https://gkwhelps.herokuapp.com'> <button type="button" className="btn btn-info">Button</button> </Link>

pero obtengo exactamente los mismos errores que antes.