Navigating with React Router and a Navbar

Hey there, new to React and currently working on setting up routing on my home page. The links are currently located within my navbar component, but I am thinking that I need to configure the router in App.js instead. I have Contact, Social, and Hobbies components that I want to use for routing purposes. Any assistance would be greatly appreciated :)

//NavBar Component
  <div className='NavBar'>
      <div className='nav-left'>
        <img className='laptop-logo' alt='laptop-logo' src={brentLaptop} />
        <h2 id='nav-header'>BCLabs</h2>
      </div>
      <div className='nav-right'>
        <ul>
          <li>Contact</li>
          <li>Social</li>
          <li>Hobbies</li>
        </ul>
      </div>
    </div>

//App component
<div className="App">
      <NavBar />
</div>

Answer №1

Start by installing react-router-dom from https://www.npmjs.com/package/react-router-dom

Use: import { BrowserRouter as Router } from 'react-router-dom';

Wrap your app with the Router component

Follow these steps:

  1. Import { Link } from 'react-router-dom';

  2. Add a Route Component to your app like Route path="/contact" component={Contact}

  3. Include a Link with a to attribute such as Link to="/contact" inside your list item

You can refer to the documentation for react router dom at this link https://reactrouter.com/web/guides/quick-start

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When JQuery inserts HTML code, the alignment may differ compared to when the HTML code is written

Important: Check out the comments made by Brandson below, as it contains the correct response. I have created a basic form that allows users to enter various languages (such as english, french, spanish, etc) and their respective proficiency levels (simila ...

I am attempting to dynamically align the images of two articles. The exact heights of the containers are not specified. Can anyone provide guidance on how to achieve this?

My code snippets: <article class="featured"> <img src="http://www.placehold.it/300x100/ff0000"> <p> <!--Text--> </p> </article> <article class="sub-featured"> <img src="http://www.placeh ...

Prevent users from selecting elements on the mobile site

Hey there! I'm currently working on preventing users from selecting items on my mobile site. While I've been successful in doing so on a regular website using the CSS class below .unselectable { -moz-user-select: -moz-none; -khtml-user-s ...

Pager made the bold decision to transition from a horizontal layout to a vertical format

I've been feeling frustrated lately. After being sick for a while, my customer called to inform me that the gallery pager on their website is broken. Although I managed to fix most of it and restore the original style, I'm struggling to get it t ...

What is the best way to prevent the contents of the First Column from spilling over into the Second Column using CSS

Currently, I am working on the CSS for two column sections: section one and section two. My goal is to have the first column of section one occupy the available space without overflowing into the second column, as illustrated in this image. https://i.ssta ...

Uncovering the Power of Shadow DOM within HTML

Lately, I've noticed a lot of buzz surrounding Shadow DOM. During a video I watched about the launch of Angular 2, the speaker kept mentioning Shadow DOM without much explanation. Can someone clarify what exactly Shadow DOM refers to? ...

The agreement button is unclickable for the bot due to a selenium element interaction issue

<input id="agreement-input-mobile" class="agreement-input" type="checkbox" name="agreement" aria-describedby="agreement-content"> When attempting to automate a specific task, I encounter an issue whe ...

Exploring the compatibility of Next.js and Material-UI: making them work together

I'm currently experimenting with next.js and running into issues setting up the simplest configuration. Here is the breakdown of my current setup: Relevant libraries: "react": "^16.2.0", "react-dom": "^16.2.0", "next": "^4.2.2", "express": "^4.16. ...

The Glyphicon icon fails to appear on the initial page load and only shows up after refreshing the

I have been utilizing bootstrap.min.css from bootstrap v3.3.5 which I downloaded from http://getbootstrap.com and used it locally. However, I encountered an issue with glyphicons when running it on IE 9 and above. The glyphicon icon disappears on the first ...

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

Can you show me how to magnify multiple images when hovering over them without altering their dimensions?

I am working on a gallery that features multiple images and I want the images to zoom in when hovered over without resizing the container. My project is built using Bootstrap 4. <div class="row"> <div class="col-12"><img ...

Angular 2: Implementing a Universal CSS Style Sheet

Is there a way to include a universal CSS file in Angular 2 applications? Currently, I have multiple components that share the same button styling, but each component has its own CSS file containing the styles. This setup makes it difficult to make changes ...

What is preventing me from viewing my cards in flex or grid layout?

Recently, I created cards for my team members, but encountered layout issues despite using CSS Flexbox and CSS3 Grid. Although both are supported by my browser, the problem persists. However, the layout works perfectly on mobile devices! I experimented wi ...

I am using Cometchat to display a list of specific users rather than all users

In CometChat When using CometChat, I am trying to display a list of selected users in the left sidebar of the UI instead of showing all the users. Can anyone assist me with this? I've set a limit of 5 and created a users request with the specific us ...

I am facing difficulty importing emotion js style using dynamic variables

I recently designed a webpage that has the following appearance: https://i.stack.imgur.com/AnIXl.jpg Here is the code from my _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme ...

I aim to toggle the visibility of input fields upon clicking a button

Form.html <form [formGroup]="myForm"> <ion-button [(ngModel)]="isActive"(click)="onClick()" >Add</ion-button> <ion-item> <ion-label position="floating">First Name</ion-label&g ...

First video filling the entire screen with no black bars

I am looking to implement a video tag that can occupy the entire window, centered, without distorting the aspect ratio. Additionally, I want this video tag/container to push down all other content below it. When the window is resized, I would like the vid ...

How do you center controls within a repeater control's item template?

I have a repeating control on my page that displays an image and a hyperlink one below the other. When I add more than one line of text, it causes the image to move up. I want the top of the images to be aligned horizontally and the text to flow downward i ...

Ways to ensure a div remains at the bottom of a page without using a wrapper

I am currently working on my website and this is the content I have in my body tag: #social-media { width: 175px; margin-left: auto; margin-right: auto; padding-top: 10%; } #social-media img { padding: 5px; } #soci ...

Customizing the step function of HTML5 input number with jQuery: A guide

Is there a way to modify the step value in HTML5 number inputs for my web application? I would like it to increment and decrement by 100 instead of 1. I attempted the following approach: $("#mynumberinput").keydown(function(e){ if (e.keyCode == 38) / ...