Redirecting to an external website in React

Question

I'm having an issue making a link to an external page in React.

My app uses react-router-dom and i have my App.js like this:

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

In my AccommodationPage i have a link to an external page

<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 is for example "www.foo.com"

When i click on the link, instead of opening "www.foo.com" it opens "http://localhost:3000/accommodations/www.foo.com"

Duplicate of [React-Router External link](https://stackoverflow.com/questions/42914666/react-router-external-link) — MrUpsidown, Nov 15 '20 at 11:12
@MrUpsidown it isn't, the post you linked regards a different issue. Thank You. — Lorenzo Case Del Rosario, Dec 09 '20 at 17:33

score 0 · Answer 1 · answered Nov 15 '20 at 10:42

0

You can do this by using Link as below. (Replace the a tag with this)

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

Also, If you want to open the link in a new tab just simply add target="_blank".

answered Nov 15 '20 at 10:42

Engincan Veske

329
2
7

score 0 · Answer 2 · answered Nov 15 '20 at 10:43

0

Try changing the booking.link so that it is like http://www.example.com. Include the http://.

answered Nov 15 '20 at 10:43

UsmanJ

919
1
7
11

score 0 · Accepted Answer · answered Nov 15 '20 at 16:38

the suggestions you gave me seemed not to work so i played a bit with it and while trying to add the http:// from the component (just for a trial) i found the solution:

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

But i didn't really understand what happened... do you know why now it works?

Redirecting to an external website in React

3 Answers3