我正在开始我的react.js之旅,我的目标是创建一个单页面应用程序,其中顶部导航链接滚动到首页上的相应部分,如THIS SITE。
到目前为止,我的应用程序实现了React.js和React-Router,并将链接组件嵌入首页。我正在努力的是正确的实现,改变这个代码,以获得上面链接中显示的结果。有许多SPA教程,但我还没有找到一个使用React.js + React-Router解决我的特定场景的当前版本。谁会知道一个干净的方法来做到这一点?或者也许是最近的一个教程,让您逐步完成整个过程?
下面我将列出一些相关代码,以帮助指导解决方案(或推荐)的响应。请提前告知您我收到的任何回复。
非常尊重, 卡马
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>
答案 0 :(得分:2)
所以我跟着This Tutorial获取导航链接以转到页面的其他部分。我没有使用this.props.children将组件传递给layout.js文件,而是在单个页面上添加了我想要的每个组件,如下所示:
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>
);
接下来,我将导航栏链接从react-router链接更改为锚点,如教程所述。
为了让平滑滚动工作,我使用了HERE找到的Javascript文件。