尝试在ReactJs中添加实时网站URL

Question

我正在尝试添加实时网站URL，即"https://covid19statswebsite.netlify.app/"这样，当我点击我的按钮时，它应该会将我重定向到上面的URL。我该怎么做？有什么建议吗？

下面是我的按钮，

import React from "react";
import "./Banner.css"
import BannerVideo from './videos/video-2.mp4'
import {Button} from "react-bootstrap";
import {useHistory} from "react-router-dom";
// import axios from './axios'
// import requests from "./Request";
function Banner(){
const history = useHistory()
return(
<div className="banner-container">
<video src={BannerVideo} autoPlay loop muted/>
<h1>ADVENTURE AWAITS</h1>
<p>What are you waiting for?</p>

/////////// Button That needs to redirect it ///////////////////////////////////////////////////////
<div className="banner-buttons">
<br/><br/><Button onClick={() => history.push("/covid")} className="covid"><span>COVID-19 Status</span></Button>
</div>
</div>
);
}
export default Banner

这是我的App.js文件，它为Routes导入上面的Banner.js

import React, {useEffect} from 'react';
import './App.css';
import HomeScreen from "./screens/HomeScreen";
import LoginScreen from "./screens/LoginScreen";
import ProfileScreen from "./screens/ProfileScreen"
import {auth} from "./firebase";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import {useDispatch, useSelector} from "react-redux";
import {login, logout, selectUser} from "./features/userSlice";
import Spain from "./countries/Spain";
import Covid from './Covid.js'
function App() {
const user = useSelector(selectUser)
const dispatch = useDispatch();
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(userAuth => {
if (userAuth){
dispatch(login({
uid: userAuth.uid,
email: userAuth.email
}))
}else {
dispatch(logout());
}
});
return unsubscribe
}, [dispatch]);

return (
<div className="App">
<Router>
{!user ? (
<LoginScreen/>
):(
<Switch>
<Route path="/profile">
<ProfileScreen/>
</Route>
<Route exact path="/">
<HomeScreen/>
</Route>
<Route path="/spain">
<Spain/>
</Route>
//////////////////// Covid part //////////////////////////////////////////////////////////

<Route path="/covid">
<Covid/>
</Route>
</Switch>
)}
</Router>
</div>
);
}
export default App;

下面是我创建的Covid.js，用于检查路线是否有效。

import React from "react";
function Covid(){
return(
<div className="covid">
<h1>hello</h1>
</div>
)
}
export default Covid

Answer 1

编辑：

import { Link } from "react-router-dom";
<Link
to={{
pathname:
"https://.......",}}
target="_blank">
<Button>...</Button>
</Link>

尝试将链接放在超链接中。

<a 
href="https://covid19statswebsite.netlify.app/"
target="_blank">
<Button>...</Button>
</a>