I am very new to React and am trying to convert a pre-made HTML site into a React App. I have converted the vast majority of the functionality over just fine, however I am trying to get the nav-bar to work as it does in the original HTML, but cannot.
Here is the original HTML for the nav-bar functionality:
<body data-spy="scroll" data-target="#pb-navbar" data-offset="200">
<nav class="navbar navbar-expand-lg site-navbar navbar-light bg-light" id="pb-navbar">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample09">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#section-home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#section-portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#section-resume">Resume</a></li>
<li class="nav-item"><a class="nav-link" href="#section-about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#section-contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
And here is my nav-bar React component:
import React, { Component } from 'react'
export default class TopNavBar extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg site-navbar navbar-light bg-light" id="pb-navbar">
<div className="container">
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse justify-content-md-center" id="navbarsExample09">
<ul className="navbar-nav">
<li className="nav-item"><a className="nav-link" href="#section-home">Home</a></li>
<li className="nav-item"><a className="nav-link" href="#section-resume">Resume</a></li>
<li className="nav-item"><a className="nav-link" href="#section-about">About</a></li>
<li className="nav-item"><a className="nav-link" href="#section-contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
)
}
}
Here is the React App.js file:
import './App.css';
import TopNavBar from './components/Topnavbar';
import Introduction from './components/Introduction';
import Resume from './components/Resume';
import About from './components/About';
import Services from './components/Services';
import Contact from './components/Contact';
import Footer from './components/Footer';
function App() {
return (
<div id="colorlib-page">
<div id="container-wrap">
<TopNavBar></TopNavBar>
<div id="colorlib-main">
<Introduction></Introduction>
<Services></Services>
<Resume></Resume>
<About></About>
<Contact></Contact>
<Footer></Footer>
</div>
</div>
</div>
);
}
export default App;
I am pretty sure the functionality that is missing is due to the <body>
tag’s attributes being: data-spy="scroll" data-target="#pb-navbar" data-offset="200"
, however I am not sure how to add this to the overall React app.
It also seems to be missing the CSS effects on the nav-bar, as it does not smoothly scroll when one clicks on a nav-link, but instead instantly takes you to the location.
Any direction on where to go from here would be greatly appreciated!
>Solution :
Somewhere in your React application there is a <body>
element. It’s unlikely to be in the <App>
component, but likely to be in whatever uses the <App>
component.
For example, you may have an index.html
which has an otherwise empty but complete/valid HTML document structure that may contain a single <div>
in the body, and the React app is initialized in that <div>
.
The <body>
element in that file is the <body>
element used in the resulting application. That’s where you can make those changes.