为什么我的导航栏 "inexistant" 用于我的其他组件？

Question

我刚刚创建了一个 React 应用程序。首先，我想为左侧创建一个导航栏，以便在每个页面上都可以访问。到目前为止一切顺利，运行良好，当我开始创建我的第一个页面时，我的问题出现了：它一直在我的导航栏下裁剪，而我没有做任何事情让它离开栏下，这让我发疯。这是代码的当前状态...

App.js

class App extends Component {
    render() {
        return(
            <Router>
                <SideNavBar />
                <Switch>
                    <Route exact path={"/"} component={HomePage} />
                </Switch>
            </Router>
        );
    }
}

导航栏

class SideNavBar extends Component {
constructor(props) {
    super(props);
    this.state = {
        currentPath: props.location.pathname,
    };
}

onClick (path) {
    this.setState({ currentPath: path });
}

render() {
    const { currentPath } = this.state;
    const navItems =
        [
            {
                path: "/",
                css: "fas fa-home"
            }, {
                path: "/user",
                css: "fas fa-user"
            },
        ];

    return(
        <StyledSideNavBar>
            {
                navItems.map((item, index) => {
                    return (
                        <NavItem
                            item={item}
                            active={item.path === currentPath}
                            onClick={this.onClick.bind(this)}
                            key={index}
                        />
                    );
                })
            }
        </StyledSideNavBar>
    );
}
}

样式化导航栏

const StyledSideNavBar = styled.div`
display: flex;
flex-direction: column;
justify-content: flex-start;
position: fixed;
height: 100vh;
width: 5rem;
top: 0;
left: 0;
padding-top: 1.5rem;
background-color: #EEEEEE;
`;

Navitem

class NavItem extends Component {

render() {
    const { item, active, onClick } = this.props;
    return(
        <StyledNavItem active={active}>
            <Link to={item.path} className={item.icon} onClick={() => onClick(item.path)} />
        </StyledNavItem>
    );
}
}

样式化的 Navitem

const StyledNavItem = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 1.5rem;
a {
    font-size: 2.7em;
    color: ${(props) => props.active ? "#8394F5" : "black"};
    :hover {
        opacity: 0.7;
        text-decoration: none;
    }
}
`;

首页

class HomePage extends Component {

render() {
    return (
        <StyledHomePage>
            {"Hi {user}!hhhhhhhhhhhhhhhhhhhhhh"}
        </StyledHomePage>
    );
}
}

样式化主页

const StyledHomePage = styled.div`
display: "flex",
margin: "5rem 5rem 0 5rem"
`;

Answer 1

当您为导航栏提供 postion: fixed 时会出现问题，您应该创建一个流畅的设计并移除固定位置。如果您需要更多帮助，请告诉我。

为什么我的导航栏 "inexistant" 用于我的其他组件？

Why is my navbar "inexistant" for my other components?

navbar

reactjs

react-router