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
 
stephanieopala profile image
Stephanie Opala

Thanks for the heads up.

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
 
tagwirei12 profile image
tagwirei12

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

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
 
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
 
yusufgitcollab profile image
Harsh Singh

Thank you so much . It was easy to follow

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

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 :)