DEV Community

Simple responsive navigation bar | React.js

Stephanie Opala on June 23, 2021

This article is a step-by-step guide on how to create a simple navigation bar using React.js, styled components for styling, and react router to ha...
Collapse
 
yasarayan profile image
yasar-ayan •

Warning: React does not recognize the activeStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase activestyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Collapse
 
stephanieopala profile image
Stephanie Opala •

This issue is resolved.

Collapse
 
felipebasilio profile image
Felipe Basilio •

Where?

Thread Thread
 
stephanieopala profile image
Stephanie Opala •

I have updated the index.js code snippet. Feel free to check it out

Collapse
 
beeb12 profile image
Beez B •

Hi, where was the issue solved?

Thread Thread
 
stephanieopala profile image
Stephanie Opala •

I have updated index.js code snippet. You can have a look at it

Collapse
 
olajesu070 profile image
OLAJESU BENJAMIN •

ERROR in ./src/App.js 21:35-41
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)

ERROR in ./src/components/Navbar/NavbarElements.js 5:0-39
Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\MAX\header\src\components\Navbar'

webpack compiled with 2 errors

Collapse
 
stephanieopala profile image
Stephanie Opala •

react-router-dom updated their syntax. Use Routes instead of Switch
You can find more information here.
github.com/howtographql/howtograph...

Collapse
 
olajesu070 profile image
OLAJESU BENJAMIN •

Compiled with problems:X

ERROR in ./src/components/Navbar/NavbarElements.js 5:0-39

Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\MAX\nav\src\components\Navbar'

Thread Thread
 
olajesu070 profile image
OLAJESU BENJAMIN •

npm install styled-components --save

THIS FIXED IT

many thanks, would like to have some clearity conversation with you

Collapse
 
tagwirei12 profile image
tagwirei12 •

hello there, I keep getting a blank page on my browser any help?

Collapse
 
davidforer profile image
David Forer •

Just wanted to say nice tutorial. Definitely added it to my components.

Collapse
 
stephanieopala profile image
Stephanie Opala •

Thank you

Collapse
 
nikhilturale profile image
Nikhil Turale •

thanks for this post

Collapse
 
balaji1995ui profile image
Balaji •

Hi I follow the above instruction but still not responding in H tags why this happing ..

Collapse
 
balaji1995ui profile image
Balaji •

Issue has been fixed.
}/>
component instead of element

Collapse
 
dookiedarnell profile image
💤sleepy sanjay💤 •

what do yuo mean by this

Thread Thread
 
stephanieopala profile image
Stephanie Opala • • Edited

He is referring to to this line of code,
<Route path="/about" element={<About />} /> and the rest of the route
The latest version of react router uses element={<About />} instead of component={<About />}

Collapse
 
yusufgitcollab profile image
Harsh Singh •

Thank you so much . It was easy to follow

Collapse
 
charan_ganesh_e59e315413e profile image
Charan Ganesh •

Thanks. It would have been super nice if you would have added output screen as well since some people need expected outcome before code :)

Collapse
 
grivas97 profile image
grivas97 •

Hey everything is working for me but for some reason my h1 tags are not showing? this happen to same tutorial i followed on w3school maybe you might have an idea why?

Collapse
 
ayushjii profile image
ayushjii •

same here pages are not showing h1 tag or any other