Complete React Tutorial (& Redux) #26 - Links & NavLinks

if someone here encounters some error with the router, just install this via terminal:
npm install [email protected]

This was such a short and sweet video on the matter! A few years later it's still a clean and modern way of handling such cases, thanks for putting out this brief gem of a video. <3

Thank you. Just what I was looking for. Short and to the point.

thank you! I SPENT 8 HOURS TRYING TO DO THIS!!! THANK YOU!

my list is getting aligned towards left beneath poketimes tag . what should i do about it ?

How to pass parameters to those Route components?

ty

Master piece of a course brother.

I am not skipping any of your adds even it is a minute long
Thank you ninja guru for this amazing content.

How react can make a request to a server if ALL pages (links) are local components????

Hey Shaun can you add up some videos on hooks

Loving it yay....LoL....

Question: How to make drop down menus?

Nice explanation

even though the tutorial is short you get a lot of knowledge from it Thanks Shaun this course is the best

Lmao just struggled for half an hour trying to fix my nginx configuration, turns out I was writing link with a lowercase L.

Thanks a lot:) explanations are good.

what if user types url as /login
but that route in not defined at all
and react shows white screen at that time
so how can i handle wrong route request

one question that has been troubling me is that how do you render the link of the sidebar in the same component itself?

Quick question @The Net Ninja, what if i have a chart with Odata connection. If my data changes then chart has to be rendered !! so will this be an issue????

If you had to put className where would that be?

I've learned a lot in this course. Your explanation about react is really clear. Thank you so much, Shaun!

You make really amazing video ! Thanks !!!

Error now Error: Invariant failed: You should not use <Link> outside a <Router>


I had to get rid of the navbar.js and use the following on App.js render:

<div className="App">
<BrowserRouter>
<nav className="nav-wrapper red darken-3">
<div className="container">
<a className="brand-logo">Poke'Times</a>
<ul className="right">
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</div>
</nav>

<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
</BrowserRouter>
</div>

Ninja pls reply me, why are you only using "Link" for Navbar.js and used "Route" for App.js? is it not ok if you use "Link" in App.js too?

This is cool..Learning a lot..Thanks a lot..

Does this page still count as a SPA?

Great video. Thanks.

Someone please help me out. How do we pass the props to the child component from App.js when we are using the router?
In the previous examples we would do for example <Home addNinja={this.addNinja}/> Now that we are using the route tag, how do we pass down this.addNinja?

Simple yet informative. Thanks for this

Really this course is priceless.

I just flipped every website for a good react course and I didn't understand a shit, but now with this i'm not afraid for the first time from react! I really want to donate but my country is not supported by online money handeling

Any one?

I click on links it only changes URL but the page does not show in the browser. I have tried every single solution but all in vain. Kindly help me.

Best tutorials for reactjs, thanks a lot for Net Ninja.!

Really enjoying React so far, thanks Shawn, you rock!

Man I'm loving this channel. Every single line that leaves his mouth is right on point and helpful in one way or another. Thanks Ninja!

edspeedy toujours là, en force !
Toujours excellent !
Merci :)

So in the nav should be single Nav tag and the rest NavLinks am i right? Couse when I made all the NavLinks then i had Home still active even if i clicked on another one. Solution is adding the exact attribute to home. But is there the best way? Thank you so much for this series you are awsome teacher !

The "Link and NavLink" is very useful. It saves several reloading, which saves us time and the money we pay for the communication charges. Thanks!

In what way is this about redux?

REACT MOBX please

thank u for sharing .. love from indonesia

Great Tutorial, how do you deal with SEO crawlers while on a SPA? crawlers will wait for a page reload to "crawl" through the content on every link click, since the component is intercepting the call and rendering the component is this going to stop the crawler? isn't this very detrimental for SEO friendly web development?

Thank u for this awesome video

I did NavLink to "/" and background color for "a .active" . The Home's class remains "active" at other two pages.

You are amazing , I cant wait for the rest of this course . You made react looks so easy to understand . Thank you

Excellent videos! Really looking forward to Redux. How many videos before we get there? :)

That "Links & NavLinks" is a life saver for real.
You'd a very vision to revisit this react series.
You're touching a lot of cool stuff bro.
Keep it up, and please tell me that you're currently working on udemy course right now