我正在开始我的 react.js 之旅，我的目标是创建一个单页应用程序，其中顶部导航链接滚动到首页上的适当部分，如 THIS SITE .
到目前为止，我的应用程序实现了 React.js 和 React-Router，并将链接组件嵌套在首页中。我正在努力解决的是正确的实现，以更改此代码，以获得上面链接中显示的结果。那里有很多 SPA 教程，但我还没有找到一个当前的教程来解决我使用 React.js+React-Router 的特定场景。谁知道一个干净的方法来做到这一点？或者最近的教程可以引导一个人完成整个过程？
下面我将列出一些相关代码，以帮助指导解决方案(或建议)的回复。提前感谢您对我收到的任何回复。
非常恭敬地， 卡马
客户端.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);
布局.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>
最佳答案
所以我关注了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 链接更改为 anchor ，如教程所述。
为了平滑滚动，我使用了找到的 Javascript 文件 HERE .
关于javascript - React.js 和滚动 SPA，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37491119/