如何解耦路由器和导航栏,以便导航栏组件不包括组件

时间:2019-06-05 02:14:28

标签: reactjs routing background navbar

我正在创建一个投资组合网站,在这种设计中,我拥有整个网站的背景,当内容在其上滚动时,背景将保持不变。导航栏也已修复,并在其下方滚动了内容。

这种设计看起来很酷,并且组装起来也不太困难,但是我在将React Routing集成到这种组合中时遇到了一些麻烦。

根据我的收集,这些教程说要创建一个App-Router组件,基本上看起来就像他们说“ Navbar”的方式一样。因此,我做到了,然后将Navbar路由到我的主页和“关于我”组件页面。但是,由于我的导航栏是固定的,因此所有页面都拒绝滚动,这意味着它们被包含在导航栏组件中。这与我想发生的事情相反。

我的理想设置是让导航栏(它是其自己的组件)向“路由”组件发送路由请求,然后路由组件将呈现该组件(“导航栏”,仍包含在包含背景的应用容器中)。

到目前为止,这是我结构中的一些伪代码(错误代码):

App.js

    <div className="App">
        <Navigation />
        {/* <other components to render here /> */}
    </div>

App.css

     background-image: url(blah);
     background-attachment: fixed;
     z-index: -1;

Navigation.js

    <Router>
        <div className="App-navigation">
            <Container>
                <Row>
                    <Link to="/">Home</Link>
                    <Link to="/About">About Me</Link>
                </Row>
            </Container>

            <Route path="/" exact component={Home} />
            <Route path="/About" component={About} />
        </div>
    </Router>

Navigation.css

    .App-navigation {
        // blah blah
        position: fixed;
        z-index: 10;
    }

About.js和Home.js仅具有各自的页面内容。

使用上述方法,即使“主页”的内容比页面高度还多,显然包含导航栏的固定位置也会阻止滚动。

我对React还是很陌生,所以我不确定设置应用程序路由组件的正确过程,也不知道它应该适合应用程序体系结构的位置。任何帮助或指导表示赞赏!

2 个答案:

答案 0 :(得分:0)

两种快速解决方案。

1#在路由器中仅创建2个组件:app / portfolio和PageNot Found。延迟加载组件,您不想立即加载。像关于组件。唯一的缺点是,如果您继续,URL不会更改。

2#只需在其他每个页面/组件中导入Navbar组件,或使用HOC模式,基本上可以得到相同的结果。

答案 1 :(得分:0)

您只需要稍微调整一下结构即可确保路线/视图/组件在组件Navigation之外呈现。移动Router可以包装App的大多数子项(如果不是全部子项)。从Route中删除Navigation元素,因为Route是呈现每个路径/视图/组件内容的位置。将已删除的Route元素移到Navigation外部和Router内部的某个其他组件。

应用程序:

<div className="App">
  <Router>
    <Navigation />
    <Main /> {/* component for rendered components */}
  </Router>
</div>

导航:

<div className="App-navigation">
  <Container>
    <Row>
      <Link to="/">Home</Link>
      <Link to="/About">About Me</Link>
    </Row>
  </Container>
</div>

主要:

<div className="App-main">
  <Container>
    <Route path="/" exact component={Home} />
    <Route path="/About" component={About} />
  </Container>
</div>

这里是example的动作。

希望有帮助!