如何分离 Router 和 Navbar 以便 Navbar 组件不包含组件

Question

我正在创建一个投资组合网站，在这个设计中，我有一个整个网站的背景，当内容在其上滚动时，该背景将保持固定。导航栏也是固定的，内容在它下面滚动。

这个设计看起来很酷，而且组合起来也不难，但我在将 React Routing 整合到这个组合中时遇到了一些麻烦。

根据我收集到的信息，教程说要创建一个 App-Router 组件，这基本上看起来像他们的说法 "Navbar"。所以我这样做了，让我的导航栏路由到我的主页和关于我的组件页面。但是，由于我的 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 的新手，所以我不确定设置应用程序路由组件的正确过程，或者它应该适合应用程序架构的位置。感谢任何帮助或指导！

Answer 1

两个快速解决方案。

1# 在路由器中只创建 2 个组件：app/portfolio 和 PageNot Found。延迟加载您不想立即加载的组件。喜欢关于组件。唯一的缺点是 url 不会改变，如果你追求它的话。

2# 只需在其他 page/component 中导入 Navbar 组件或使用 HOC 模式，这基本上会产生相同的结果。

Answer 2

您只需稍微调整一下结构即可确保 routes/views/components 在组件 Navigation 之外呈现。移动 Router 以包裹 App 的大部分（如果不是全部）子项。从 Navigation 中删除 Route 元素，因为 Route 是每个 route/view/component 的内容将呈现的位置。将删除的 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 的动作。

希望对您有所帮助！

如何分离 Router 和 Navbar 以便 Navbar 组件不包含组件

How to decouple the Router and Navbar so the Navbar component is not including components

routing

background

navbar

reactjs