React.js和Scrolling SPA

时间:2016-05-27 19:41:07

标签: javascript reactjs single-page-application react-router

我正在开始我的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>

1 个答案:

答案 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文件。