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

所以从你给出的评论中，我认为你想要的是什么;

包含多个可滚动部分的单个页面。
能够使用浏览器导航为滚动位置添加书签。

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

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')
);

只需确保具有相应ID的相应html元素即可，您应该全部设置。

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

1 个答案: