Fatal编程技术网

Javascript React.js和滚动SPA

javascript reactjs

Javascript React.js和滚动SPA,javascript,reactjs,single-page-application,react-router,Javascript,Reactjs,Single Page Application,React Router,我正在开始我的react.js之旅，我的目标是创建一个单页应用程序，其中顶部导航链接滚动到首页上的相应部分，如 到目前为止，我的应用程序实现了React.js和React Router，并将链接组件嵌套在首页中。我正在努力的是正确的实现，修改代码，以获得上面链接中显示的结果。有很多SPA教程，但我还没有找到一个最新的使用React.js+React Router解决我的特定场景的教程。有人知道一个干净的方法吗？或者是最近的一个教程，引导一个人完成这个过程 下面我将列出一些相关代码，以帮助指导解决

我正在开始我的react.js之旅，我的目标是创建一个单页应用程序，其中顶部导航链接滚动到首页上的相应部分，如

到目前为止，我的应用程序实现了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);

const-app=document.getElementById（'app'）；
ReactDOM.render(
,
应用程序）；
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>
    );
  }
}

导出默认类布局扩展React.Component{
render（）{
const{location}=this.props；
返回(
{this.props.children}
);
}
}
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.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>
    );

返回(

有一个很酷的库，它可以让你跟踪组件的位置（）。你使用路由器后的推理是什么？你能不能有按钮，当点击使用LIB i链接，然后做一个页面滚动到合适的位置？或者你可以考虑好的老的本地锚标签：D。