CODEWITHSUNDEEP
htmlcssreactjsreact-router
Brent Carey
Brent Carey

Reputation: 11

React Router with Navbar

Hi I am new to React and I am trying to set up routing on a home page. The links are currently inside of my navbar component, but I believe I would have to setup the router in App.js? I do have Contact, Social and Hobbies components that I would like to use for routing. Thank you for your help :)

//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>

Upvotes: 0

Views: 50

Answers (1)

Vince
Vince

Reputation: 869

You should install react-router-dom first from https://www.npmjs.com/package/react-router-dom

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

Wrap your app with Router

Steps:

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

  2. set a Route Component into your app e.g Route path="/contact" component={Contact}

  3. put a Link with a to attribute e.g Link to="/contact" inside your li

Your can check the docs in react router dom in this link https://reactrouter.com/web/guides/quick-start

Upvotes: 1

Related Questions