如何在React中为单个页面滚动网站组织组件？

我试图创建一个页面滚动投资组合页面，其中所有的内容都在一个页面上，并且顶部有一个导航栏，可以引导您访问页面的不同部分。如何在React中为单个页面滚动网站组织组件？

基本上，我试图让这个完全相同的网站，但在反应：http://codepen.io/drhectapus/pen/bBpYoZ

的问题是，我不完全知道如何安排我的组件此单页布局。

这是怎么了，我在我的index.js文件到目前为止也安排的：

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <div className='app-container'> 
     <Nav /> 
     <Switch> 
      <Route path='/contact' component={Contact} /> 
      <Route path='/work' component={Work} /> 
      <Route path='/about' component={About} /> 
      <Route path='/' component={Home} /> 
     </Switch> 
     </div> 
    </BrowserRouter> 
    </Provider>, 
    document.querySelector('#app') 
);

任何帮助，不胜感激:)

来源

2017-05-15 doctopus

ReactRouter可能不是您想要使用的工具。它明确地用于在uri之间导航，使用反应在前端进行管理。如果你只想滚动链接到不同的元素，你示例中的所有东西都应该按原样工作。 – gravityplanx

事情是，我想让网址也起作用，所以如果我去/关于它会引导我到'约'部分。 – doctopus

所以从你给的意见，我认为什么你想要的是;

具有多个可滚动部分的单个页面。
使用浏览器导航来书签滚动位置的能力。

为此，首先我们要指定页面的样子。由于所有元素都需要一次渲染，因此应该是这样的;

Container = React.createClass({ 
    render: function(){ 
     return <div> 
      <Home/> 
      <Contact/> 
      <Work/> 
      <About/> 
     </div>; 
    } 
}); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <div className='app-container'> 
     <Nav /> 
      <Route path='/' component={Container} /> 
     </div> 
    </BrowserRouter> 
    </Provider>, 
    document.querySelector('#app') 
);

接下来，我们将更新路由器以包含多个路径...但每个路径仍将呈现相同的输出;

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <div className='app-container'> 
     <Nav /> 
      <Route path='/contact' component={Container} /> 
      <Route path='/work' component={Container} /> 
      <Route path='/about' component={Container} /> 
      <Route path='/' component={Container} /> 
     </div> 
    </BrowserRouter> 
    </Provider>, 
    document.querySelector('#app') 
);

最后，我们建立了onEnter触发每条路线上滚动到一个指定的HTML元素，通过ID;

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <div className='app-container'> 
     <Nav /> 
      <Route path='/contact' component={Container} 
       onEnter={function(){ 
        document.getElementById("contact_id").scrollIntoView(); 
        } 
       } 
      /> 
      <Route path='/work' component={Container} 
       onEnter={function(){ 
        document.getElementById("work_id").scrollIntoView(); 
        } 
       } 
      /> 
      <Route path='/about' component={Container} 
       onEnter={function(){ 
        document.getElementById("about_id").scrollIntoView(); 
        } 
       } 
      /> 
      <Route path='/' component={Container} 
       onEnter={function(){ 
        document.getElementById("home_id").scrollIntoView(); 
        } 
       } 
      /> 
     </div> 
    </BrowserRouter> 
    </Provider>, 
    document.querySelector('#app') 
);

只要确保具有相应的html元素与适当的ID，你应该都设置。

来源

2017-05-15 22:59:26 gravityplanx

我按照你的说明做了，但它似乎没有完全工作。当我访问url'/ contact'时，它似乎在一秒钟之前向下滚动到联系人ID div，然后再次从页面顶部刷新。 – doctopus

如何在React中为单个页面滚动网站组织组件？

回答

相关问题