reactjs - 为什么我的导航栏对我的其他组件“不存在”？

Question

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

应用程序.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;
`;

导航仪

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>
    );
}
}

风格的 Navite

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你的导航栏时，问题就出现了，你应该创建一个流体设计并删除固定位置。如果您需要更多帮助，请告诉我。