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

vic•3mo ago

This is app.js

vic•3mo ago

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

anes039•3mo ago

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

vic•3mo 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•3mo ago

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

vic•3mo ago

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

anes039•3mo ago

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

vic•3mo ago

Fixed

anes039•3mo ago

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

vic•3mo ago

anes039•3mo ago

If u put two navs In app . Js

vic•3mo ago

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

anes039•3mo ago

Yes Try it

vic•3mo ago

I tried

anes039•3mo ago

So?

vic•3mo ago

It works just like that in app.js

anes039•3mo ago

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

vic•3mo ago

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

anes039•3mo ago

Okay

vic•3mo 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•3mo ago

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

vic•3mo ago

inside home, about components ?*

anes039•3mo ago

Yeah

vic•3mo ago

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

anes039•3mo ago

Did it work

vic•3mo ago

Yes it works Thanks

Gaming

Programming

need help with navbar and contents in reactjs