CODEWITHSUNDEEP
reactjsreact-router
BigSteve
BigSteve

Reputation: 55

How to have React Router links inside child react components

I'm struggling with what I'm sure is the basics of React Router. I have an overall App.js file, and a child react functional component, Navbar.js. I want my Switch to be in App.js, but Navbar.js to have Links to my different pages.

The questions I looked at previously dealing with nesting talked about nested routes, but I don't think that is my case here. Do I need to declare a new route in the Navbar component? I'm a little confused as to why I can't just have the link component on its own in Navbar, or just push the page I want to history.

Upvotes: 2

Views: 2295

Answers (2)

Shmili Breuer
Shmili Breuer

Reputation: 4147

In App.js you can have the switch

<BrowserRouter>
    <Switch>
        <Route path="/" component={Home}/>
        <Route path="/contact-us" component={ContactUs}/>
        ....
    </Switch>
</BrowserRouter>

And in the Navbar.js you can have the navigation

<div>
    <Link to="/">Home</Link>
    <Link to="/contact-us">Contact us</Link>
    .....
</div>

Upvotes: 0

hrushikesh kuklare
hrushikesh kuklare

Reputation: 116

Okay, So you just need to import what we call as a Link from react-router-dom.
And then you can use Link as an "anchor" tag

import {Link} from 'react-router-dom'
 <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>

Upvotes: 1

Related Questions