时间戳

首页 > 解决方案 > 在 React 中重定向到外部网站

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

在我的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”

标签： javascriptreactjsreact-router

解决方案

您可以通过使用Link如下方式来做到这一点。（用这个替换a标签）

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

此外，如果您想在新选项卡中打开链接，只需添加target="_blank".

推荐阅读