如何在 React 中组织单页滚动网站的组件？

Question

我正在尝试创建一个单页滚动投资组合页面，其中所有内容都在一个页面上，顶部有一个导航栏，可以将您引导到页面的不同部分。

基本上，我正在尝试制作这个完全相同的网站，但做出反应：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. 具有多个可滚动部分的单个页面。

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 就可以了。