Menu
I am beginning my react.js journey, and my goal is to create a single page application where the top navigation links scroll to the appropriate section on the front page like THIS SITE.
So far, My application implements React.js and React-Router, and nests the link components within the front page. What I am struggling with is the correct implementation, to alter this code, in order to get the outcome shown in the link above. There are many SPA tutorials out there, but I have yet to find a current one that addresses my particular scenario using React.js+React-Router. Would anyone know a clean way to do this? or maybe a recent tutorial that walks one through the process?
Below I will list some relevant code to help guide the responses for a solution (or recommendation).Thank you in advance for any responses that I do receive.
Very Respectfully, Kama
client.js
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Home} />
<Route path="AboutUs" component={AboutUs}></Route>
<Route path="OurMission" component={OurMission}></Route>
</Route>
</Router>,
app);
Layout.js
export default class Layout extends React.Component {
render() {
const { location } = this.props;
return (
<div>
<Nav location={location}/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<Header />
{this.props.children}
</div>
</div>
<Footer />
</div>
</div>
);
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Haki</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cerulean/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="client.min.js"></script>
</body>
</html>
747
So I followed This Tutorial to get the navigation links to go to other portions of the page. Instead of using this.props.children to pass the components to the layout.js file, I just added each of the components I want on the single page like below:
return (
<div >
<Nav location={location}/>
<div class="container" style={layoutStyle}>
<div class="row">
<div class="col-lg-12">
<Header />
<Home />
<Mission />
<AboutUs />
</div>
</div>
</div>
<Footer />
</div>
);
Next, I changed the Nav bar links from react-router Links to anchors, as the tutorial explains.
To get smooth scrolling working, I used the Javascript file found HERE.
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With