Question

54

React Router - Open Link on new Tab and Redirect to Home Page

rated 0 times [ 59] [ 5] / answers: 1 / hits: 20233 / 6 Years ago, fri, july 20, 2018, 12:00:00

Using React Router 4.2

My attempt is to open a new tab upon clicking on a navigation link and at the same time be redirected to the site homepage.

ie: Navigation bar: clicking on Policies

Even though the code bellow behaves as the requirements above: Is this the advisable way to go about it?
Aiming to learn best practices here on Routes.js.

 //Routes.js

 import HandbookDoc from './policies.pdf'

 ...



 <Route 

   path=/registration/policies 

   component={() => window.open(`${HandbookDoc}`,'_blank').then(window.location= '/')} 

 />

....

 //Navigation.js (using react-router-bootstrap)

  <NavDropdown eventKey={3} id=formId title=Registration>

     <LinkContainer to=/registration/financial-aid>

        <MenuItem eventKey={3.1}>Financial Aid</MenuItem>

      </LinkContainer>

      <LinkContainer to=/registration/policies>

        <MenuItem eventKey={3.2}>Policies</MenuItem>

      </LinkContainer>

  </NavDropdown>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

denism

Add To Favorites

Follow

Total Points: 627

Total Questions: 96

Total Answers: 98

Location: Ivory Coast

Member since Sun, Mar 7, 2021

3 Years ago

answered 6 Years ago bryantc · Accepted Answer

You don't need to create a new route for the thing you are trying to achieve. You could add an onClick handler to the MenuItem like this:

  <NavDropdown eventKey={3} id=formId title=Registration>

     <LinkContainer to=/registration/financial-aid>

        <MenuItem eventKey={3.1}>Financial Aid</MenuItem>

      </LinkContainer>

      <LinkContainer 

        to=/>

        <MenuItem onClick={this.handlePoliciesClick} eventKey={3.2}>Policies</MenuItem>

      </LinkContainer>

  </NavDropdown>

And then in same component add the handler:

handlePoliciesClick = () => {

  window.open(HandbookDoc, '_blank');

}

Remember to import your HandbookDoc.