在 React 中重定向到外部网站答案

【问题标题】：Redirecting to an external website in React在 React 中重定向到外部网站
【发布时间】：2020-11-15 10:38:01
【问题描述】：

在 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>
  );
}

在我的AccommodationPage 中，我有一个指向外部页面的链接

<ul className="booking-sites p-0">
  {accommodations && accommodation.bookings.map((booking, index) => {
    return (
      <li key={index} className="booking-method">
        <a href={booking.link} className="booking-link">
          <img
            src={booking.logo}
            alt={`booking method ${index}`}
            className="booking-icon"
          />
        </a>
      </li>
    );
  })}
</ul>

booking.link 是例如“www.foo.com”

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

【问题讨论】：

重复React-Router External link
@MrUpsidown 不是，您链接的帖子涉及不同的问题。谢谢。

标签： javascript reactjs react-router

【解决方案1】：

您可以使用Link 来执行此操作，如下所示。（用这个替换a标签）

<Link to={{ pathname: booking.link }}  />

另外，如果您想在新标签页中打开链接，只需添加 target="_blank"。

【讨论】：

【解决方案2】：

尝试更改booking.link，使其类似于http://www.example.com。包括http://。

【讨论】：

【解决方案3】：

你给我的建议似乎不起作用，所以我玩了一下，在尝试从组件中添加 http://（仅供试用）时，我找到了解决方案：

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

但我真的不明白发生了什么……你知道为什么它现在起作用了吗？

【讨论】：