3

I want to create pages which can override over another pages in React. Like see for an example here in Youtube: https://youtu.be/n5kr99DAjDk?t=441. The 'Post' page is opened with full height and a 'Back' button. This was easily possible in React Native. How could it be done in React for web.

Below is the code for reference:

App.js

const Routing = () => {

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

Home.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;

NewPage.css

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

I have tried position:absolute in NewPage but, no use. What could be best possible solution? Please have a look at the given below codesandbox link for clarity of code. Here is the codesandbox link: https://codesandbox.io/s/react-material-forked-9dodd

4

1 回答 1

2

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

解决方案完全是 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;
}
于 2021-03-22T10:29:28.917 回答