Javascript 在React中重定向到外部网站

我在React中创建指向外部页面的链接时遇到问题

我的应用程序使用react router dom，我的app.js如下：

function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <div className="App my-content">
          <Router>
            <Header />
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/accommodations" component={Accommodations} />
              <Route exact path="/rentals" component={RentalServices} />
              <Route exact path="/tours" component={DailyTours} />
              <Route exact path="/contacts" component={ContactUs} />
              <Route
                exact
                path="/editaccommodations"
                component={EditAccommodations}
              />
              <Route
                exact
                path="/addaccommodation"
                component={AddAccommodation}
              />
              <Route
                exact
                path="/accommodations/:id"
                component={AccommodationPage}
              />
              <Route component={NotFound} />
            </Switch>
            <Footer />
          </Router>
        </div>
      </ReactReduxFirebaseProvider>
    </Provider>
  );
}

booking.link

例如是“www.foo.com”

---

当我点击链接，而不是打开“www.foo.com”时，它会打开http://localhost:3000/accommodations/www.foo.com“

您可以使用下面的

链接来执行此操作。（将
a
标签替换为该标签）



此外，如果您想在新选项卡中打开链接，只需添加
target=“\u blank”
尝试更改
booking.link
，就像
http://www.example.com
。包含
http://
您给我的建议似乎不起作用，因此我对它进行了一些尝试，在尝试从组件添加
http://
时（仅用于试用），我找到了解决方案：

<a href={`${booking.link}`} className="booking-link">
  <img
    src={booking.logo}
    alt={`booking method ${index}`}
    className="booking-icon"
  />
</a>



但我真的不明白发生了什么。。。你知道为什么现在它能工作吗？
重复@MrUpsidown它不是，你链接的帖子考虑的是另一个问题。非常感谢。
<Link to={{ pathname: booking.link }}  />

<a href={`${booking.link}`} className="booking-link">
  <img
    src={booking.logo}
    alt={`booking method ${index}`}
    className="booking-icon"
  />
</a>