need help with navbar and contents in reactjs

NavBar Component

function NavBar(){
return (
<h1>Navbar </h1>
)
}

function NavBar(){
return (
<h1>Navbar </h1>
)
}

HomePage Component

function Homepage(){
return (
<h1>Home </h1>
)
}

function Homepage(){
return (
<h1>Home </h1>
)
}

About Component

function Aboutpage(){
return (
<h1>About</h1>
)
}

function Aboutpage(){
return (
<h1>About</h1>
)
}

So I want the navbar to be placed in same tol place throughout the entire reactpage

27 Replies

vicOP•5mo ago

This is app.js

vicOP•5mo ago

It work in browserRoutes but I applied height 100dvh and width 100% with flex property for my main content page in css

anes039•5mo ago

Why u did not put navBar component inside the Routes? Where is it supposed to be

vicOP•5mo ago

I want that navbar to be in that top place all the time , even I enter about page it should be in that place and if I enter in home page it should be in that place Lemme try that

anes039•5mo ago

Maybe dont render navBar here in app.js But inside the other components you want to render

vicOP•5mo ago

I put <Routes> <Navbar /> </Routes> It doesn't load anything But will the styles of other components will affect that ? Like height

anes039•5mo ago

U did not give the properties like path and element I dont know try that The position should be fixed or what?

vicOP•5mo ago

Fixed

anes039•5mo ago

Okay first try that thing i told u Because i think ain’t good looking

vicOP•5mo ago

anes039•5mo ago

If u put two navs In app . Js

vicOP•5mo ago

So should I add navbar in home and contact component??

anes039•5mo ago

Yes Try it

vicOP•5mo ago

I tried

anes039•5mo ago

So?

vicOP•5mo ago

It works just like that in app.js

anes039•5mo ago

so it is not solved Where is the problem and what u want to achieve

vicOP•5mo ago

I'm not good in English , lemme ask in AI and give u the proper English

anes039•5mo ago

Okay

vicOP•5mo ago

The <Navbar /> should always be visible at the top, and the <Footer /> should always be visible at the bottom. They should not be rendered conditionally. When clicking on the links in the navbar (Home, About, Contact), the corresponding content should render in between the navbar and footer. Here

anes039•5mo ago

Then just put inside those components Navbar and Footer? Thats my idea Try it I dont know any better

vicOP•5mo ago

inside home, about components ?*

anes039•5mo ago

Yeah

vicOP•5mo ago

I tried the first method u say Putting component in Routes and I use Links

anes039•5mo ago

Did it work

vicOP•5mo ago

Yes it works Thanks

Gaming

Programming

need help with navbar and contents in reactjs