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

Question

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>

Solution

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.

Comments

[Jonca33]

Thank you so much, visualizing your explanation/suggestion through the code made sense in my head now. The only issue is that browserHistory is not redirecting home...

[Jackyef]

Have you removed the to attribute in your LinkContainer?

[Jonca33]

I did. In fact, I removed LinkContainer all together, cause to is required on their api, it was throwing an error otherwise.

[Jackyef]

Weird. Is browserHistory redirecting you somewhere else? Or it just doesn't work at all?

[Jonca33]

it stays on the same page. Scenario 2. If I leave to="/" it redirects me home. Which means BrowserHistory alone is not getting triggered. But the open on new tab click handler works.