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

Jonca33 Published at Dev

501

Jonca33

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>

Jackyef

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-10-30

Comments

0 comments

React-Router open Link in new tab

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

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

pump.io port in URL

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Using Response.Redirect with Friendly URLS in ASP.NET

Can a 32-bit antivirus program protect you from 64-bit threats

Double spacing in rmarkdown pdf

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

3D Touch Peek Swipe Like Mail

Bootstrap 5 Static Modal Still Closes when I Click Outside

Assembly definition can't resolve namespaces from external packages

Vector input in shiny R and then use it

Emulator wrong screen resolution in Android Studio 1.3

Svchost high CPU from Microsoft.BingWeather app errors

Graphics Context misaligned on first paint

Python connect to firebird docker database

Is this docker-for-mac password dialog legit?

How to save models trained locally in Amazon SageMaker?