javascript - 如何在 Reactjs 中覆盖一页？

Question

我想创建可以覆盖 React 中其他页面的页面。就像在 Youtube 中查看示例一样:https://youtu.be/n5kr99DAjDk?t=441 . “发布”页面以全高和“后退”按钮打开。这在 React Native 中很容易实现。如何在 React for web 中完成。

引用代码如下:

App.js

const Routing = () => {

  return (
    <Router>
      <TopNavbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/newPage" component={NewPage} />
      </Switch>
      <BottomNavbar />
    </Router>
  );
};

首页.js

const Home = () => {

  return (
    <div style={{ marginTop: "80px", position:'relative' }}>
      <h2>Home Page</h2>
      <Link to="/newPage">
        <button>Click Here</button>
      </Link>
    </div>
  );
};

export default Home;

NewPage.js

const NewPage = () => {
  return (
    <div className="newPageCSS">
      <h2>New Page</h2>
    </div>
  );
};

export default NewPage;

新页面.css

.newPageCSS {
  margin-top: 80px;
  position: absolute;
  top:0;
  left: 0;
}

我已经在 NewPage 中尝试了 position:absolute 但没有用。什么可能是最好的解决方案？为了代码的清晰度，请查看下面给出的代码和框链接。这是codesandbox链接:https://codesandbox.io/s/react-material-forked-9dodd

Answer 1

听起来您希望新的页面组件占据页面的所有空间，除了顶部和底部导航。

解决方案完全是 CSS，但是您需要修改样式以获得正确的边距/填充。看起来您使用的 UI 库可能会与您的样式表发生冲突。

更改如下:

更新您的主容器以使用 flexbox 而不是尝试使用像素控制顶部/底部导航

#root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

然后，通过添加 flex 来扩展您的新页面组件 1. 添加红色边框以轻松可视化更改。

.newPageCSS {
    margin-top: 80px;
    border: 2px solid red;
    flex: 1;
}

更新您的主页，使底部导航固定在底部，您可以滚动主页内容

.homePageCSS {
    margin-top: 80px;
    max-height: 50%;
    /* position: relative; */
    flex: 1;
    max-height: 70vh;
    overflow: auto;
}

底部导航现在不需要固定位置

.makeStyles-gridList-2 {
    width: 100%;
    border: 1px solid grey;
    /* bottom: 0px; */
    /* position: fixed; */
    padding: 0;
    flex-wrap: nowrap;
    background: white;
}