How to have React Router links inside child react components

Question

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.

hrushikesh kuklare · Accepted Answer · 2020-04-28 17:17:49Z

1

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>

answered Apr 28, 2020 at 17:17

hrushikesh kuklare

1163 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BigSteve Over a year ago

Thank you! Is there a benefit to using <Li nk to=> tags instead of pushing it onto history, history.push('/some/path')?

Shmili Breuer Over a year ago

@BigSteve history.push('/some/path') is meant to navigate pragmatically, like after completing an API request, link is meant to be used for a button just meant to navigate.

Shmili Breuer · Accepted Answer · 2020-04-29 01:14:20Z

0

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>

edited Apr 29, 2020 at 1:14

answered Apr 28, 2020 at 17:22

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

6 Comments

BigSteve Over a year ago

Thank you! And the entirety of App.js should be wrapped in a BrowserRouter?

Shmili Breuer Over a year ago

The routes need to be wrapped in a BrowserRouter (see my updated answer)

BigSteve Over a year ago

Does the <routes> tag need to encompass the child component holding the <link> tags?

Shmili Breuer Over a year ago

@BigSteve No, both the <route> and <link> elements need to be inside the <BrowserRouter> element.

BigSteve Over a year ago

Do so the <route> and <link> could be inside the <BrowserRouter> through the composition of components? Like could the <route> and <link> components be in a component thats a child component of a component with the <BrowserRouter> tag?

|

Collectives™ on Stack Overflow

How to have React Router links inside child react components

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related