React navigation bar menu item that opens in a new window

Question

In my React app, I'm trying to add a navigation menu item that opens in a new browser window. I know this seems an odd approach, since it's not exactly navigation if it takes you to a new window. But the goal is to have the menu option appear on all the app's pages with the rest of the navbar.

I'm currently using react-bootstrap's Navbar with react-router-bootstrap LinkContainers inside it. I tried using Nav.Link and NavItem (separately) with target="_blank" and neither opens the page in a new window.

import React, { Component } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

class Header extends Component {
  ...
  render() {

    return (
      <div>
        <Navbar>
          <Nav>
            <!-- other LinkContainer items here ... -->
            <LinkContainer to="/SomePage" >
              <Nav.Link target="_blank">page</Nav.Link> <!-- opens in same tab -->
              <NavItem  target="_blank">page</NavItem>  <!-- as does this      -->
            </LinkContainer>
          </Nav>
        </Navbar>
      </div>
    );
  }
}

export default withRouter(Header);

As @Quentin Grisel mentions in his comments. Indeed this was answered also [here](https://stackoverflow.com/questions/51434254/react-router-open-link-on-new-tab-and-redirect-to-home-page/51434782#51434782) — awran5, Apr 28 '20 at 19:58

Quentin Grisel · Answer 1 · 2020-04-28T19:31:49.797

0

You don't need to open your link in a new windows but a router for this. Your Link will trigger a route. This route will be displayed where you defined them. It will look something like that :

const App = () => {
  return (
    <Router>
      <Header /> // Here, your Header will be available on every route
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/route1' component={Route1} />
        <Route path='/route2' component={Route2} />
      </Switch>
    </Router>
  );
};

You will need react router and learn how it works. Here is the link to the doc, it's pretty easy to set up: React router documentation

Also, here a thread explaining exactly what i said, for the exact same problem : How to use react-router-bootstrap linkcontainer

edited Apr 28 '20 at 19:31

answered Apr 28 '20 at 19:26

Quentin Grisel

4,794
1
10
15

Thanks for the input. I do actually have routes set up. But the links take me to those routes on the same page. Is there a way to instead set the Route component to go to a new tab or window? – Woodchuck Apr 28 '20 at 19:41
Here is another link to a similar question, never tried it before, but it looks liek there is solution with the a tag : https://stackoverflow.com/questions/30202755/react-router-open-link-in-new-tab – Quentin Grisel Apr 28 '20 at 19:46
Especially this answer that would fit your needs : https://stackoverflow.com/a/58091340/9868549 – Quentin Grisel Apr 28 '20 at 19:47
Thanks, Quentin. For some reason the only one that seems to work for me is this one: https://stackoverflow.com/a/33139502/3368818 – Woodchuck Apr 29 '20 at 15:36
1

Ok well glad i could help :) – Quentin Grisel Apr 29 '20 at 16:34

React navigation bar menu item that opens in a new window

1 Answers1