How to open a component in a new tab in ReactJS ?
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 demonstration, we will create two components: the first component and a second component. We will use Switch, React Router, Link to open these two components in new tabs.
Approach: We will create two simple components naming ‘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 that first and second component 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:
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 :
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:
Example: Let’s understand the implementation through example.
FirstComponent.js: This is the component which 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 which 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.
Route: Route component will help us to establish the link between the component’s UI and the URL. To include routes to the application, add the code give 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. “/geeks/first”. Thus the first component will open in a new tab at “http://localhost:3000/geeks/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. “/geeks/second”. Thus the SecondComponent will open in a new tab at “http://localhost:3000/geeks/second” location.
Step to Run Application: Run the application using the following command from the root directory of the project :
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/geeks/first” location. Your SecondComponent will open in a new tab at “http://localhost:3000/geeks/second” location.