Reactで1ページのスクロールWebサイトのコンポーネントを構成するには？

Question

私はすべてのコンテンツが1ページにあり、ページの異なるセクションに誘導できるトップのナビゲーションバーがある、単一のページスクロールポートフォリオページを作成しようとしています。

は基本的に、私はこの正確な同じサイトを作るためにしようとしているが、中には反応： 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') 
); 

すべてのヘルプ:)あなたが与えたコメントからそう

Answer 1

、私はそれをすることを取る何あなたが欲しいです。

1. 複数のスクロール可能なセクションを持つ1ページ。

2. 利用可能性ブラウザナビゲーションスクロール位置にブックマークを付ける。

これを行うには、まずページの外観を指定する必要があります。一度にすべての要素をレンダリングする必要があるので、このようなものにする必要があります。

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がidで、指定されたHTML要素にスクロールする各経路にトリガ設定しました。

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が設定されていることを確認してください。すべて設定する必要があります。