React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. In this tutorial, you will understand how to open a new component in another tab while residing in the main application. For the demonstration, we will create two components: the first component and a second component. We will use React Router, Routes, Route, and Link to open these two components in new tabs.
Approach: We will create two simple components named ‘FirstComponent’ and ‘SecondComponent’. In our main component i.e. App.js, we will provide 2 buttons with links to open the first and second components. Then we will apply the logic to open the first and second components in a new tab with different routes.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd foldername
Step 3: Installing packages. React Router can be installed via npm in your React application.To install the React Router use the following command:
npm install react-router-dom
Project Structure: The default file structure will look like this :
project structure
After installing react-router-dom, add its components to your React application. To know more about react-router refer this article: https://www.geeksforgeeks.org/reactjs-router/
Changing the project structure: In your project directory, create 2 files named FirstComponent.js and SecondComponent.js in the src folder. Now your new project structure will look like this:
new project structure
Example: Let’s understand the implementation through example.
FirstComponent.js: This is the component that we will use to display in a new tab. We will try to open this component when a user tries to open the first component on click. This component contains a heading with some CSS styles applied.
SecondComponent.js: This is the second component that we will use to display in a new tab. We will try to open this component when the user tries to open the second component on click. This component contains a heading with some CSS styles applied.
Javascript
// FirstComponent.jsimport React from "react";// First simple component with heading tagfunction FirstComponent() { return ( <div> <h1 style={{ // Applying some styles to the heading display: "flex", justifyContent: "center", padding: "15px", border: "13px solid #b4f0b4", color: "rgb(11, 167, 11)", }} > ????Geeks For Geeks First Component in New Tab???? </h1> </div> );}export default FirstComponent; |
Javascript
import React from "react";// Second simple component with heading tagfunction SecondComponent() { return ( <div> <h1 style={{ // Applying some styles to the heading display: "flex", justifyContent: "center", padding: "15px", border: "13px solid #6A0DAD", color: "#7F00FF", }} > ????Geeks For Geeks Second Component in New Tab </h1> </div> );}export default SecondComponent; |
Routes and Routes: These components will help us to establish the link between the component’s UI and the URL. To include routes to the application, add the code given below to your app.js.
App.js: App.js is our default component where some default code is already written. Now import our new components in the App.js file. Include React Router components in the application. We will try to open the first component when the user will click the “Open First Component” button. For this, we are providing the Link to open the path to the first component i.e. “/neveropen/first”. Thus the first component will open in a new tab at “http://localhost:3000/neveropen/first” location . Similarly, We will try to open the second component when the user will click the “Open Second Component” button. For this, we are providing the Link to open the path to the second component i.e. “/neveropen/second”. Thus the SecondComponent will open in a new tab at “http://localhost:3000/neveropen/second” location.
Javascript
import React from 'react'import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'// Importing newly created componentsimport SecondComponent from './SecondComponent'import FirstComponent from './FirstComponent'function App() { return ( // BrowserRouter to wrap all // the other components <BrowserRouter> {/*switch used to render only the first route that matches the location rather than rendering all matching routes. */} <Routes> <Route exact path='/' element={<ul> <br /> <li> {/* Link component uses the to prop to describe the location where the links should navigate to. */} <Link to='neveropen/first' target='_blank'> Open First Component </Link> </li> <br /> <li> <Link to='neveropen/second' target='_blank'> Open Second Component </Link> </li> </ul>}> </Route> <Route exact path='/neveropen/second' element={<SecondComponent />}> </Route> <Route exact path='/neveropen/first' element={<FirstComponent />}> </Route> </Routes> </BrowserRouter> )}export default App |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Your web application will be live on “http://localhost:3000”.Now, click on the links you created.
Explanation: You will notice that both components will open in a new tab with their particular routes. Your FirstComponent will open in a new tab at “http://localhost:3000/neveropen/first” location. Your SecondComponent will open in a new tab at “http://localhost:3000/neveropen/second” location.
