导航栏和页脚如何在反应中固定答案

【问题标题】：How navbar and footer make fixed in react导航栏和页脚如何在反应中固定
【发布时间】：2019-08-01 14:02:15
【问题描述】：

我有一个关于如何在路由更改时保持导航栏和页脚组件稳定的问题，现在当我更改路由时，所以当我从导航栏单击某个页面时，所有页面都会使用导航栏和页脚刷新。

我认为我在某个地方犯了错误。

这是我的应用组件：

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar/>
          <main>
            <Switch>
              <Route exact path='/' component={Home}/>
              <Route path='/Whoweare' component={Whoweare}/>
              <Route path='/Solution' component={Solution}/>
              <Route path='/ContactUs' component={ContactUs}/>
            </Switch>
          </main>
          <Footer/>
        </div>
      </Router>
    );
  }
}

export default App;

我将导航栏和页脚放在路由器 Switch 标签之外，这是对的，不是吗？

它是导航栏组件：

import React from 'react';
import {Navbar, Nav, Button, Container, NavItem} from 'react-bootstrap';
const NavbarComp = () =>
        <Navbar>
            <Container>
                <Navbar.Brand href="/">Logo</Navbar.Brand>
                <Navbar.Toggle />
                <Navbar.Collapse className="justify-content-end">
                    <Nav>
                        <NavItem>
                            <Nav.Link href='/Whoweare'>Who we are</Nav.Link>
                        </NavItem>
                        <NavItem>
                            <Nav.Link href='/Solution'>Solution</Nav.Link>
                        </NavItem>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>

export default NavbarComp;

【问题讨论】：

请分享您的导航栏代码以便更好地理解重定向
@Help 使用导航栏组件更新答案

标签： reactjs react-router

【解决方案1】：

我不确定 react bootstrap 与 react router dom 的集成。

理想情况下，您应该使用来自react-router-dom 的Link

所以在你的导航栏中import { Link } from 'react-router-dom'

并将您的NavItem更改为

<NavItem>
     <Link to='/Solution'>Solution</Link>
</NavItem>

这不会刷新页面，而是更新组件（视图）

希望这对您有所帮助。 :)

【讨论】：

很高兴为您提供帮助:)

【解决方案2】：

我认为您应该将导航栏和页脚放在路由器之外，这样即使您更改路由，它们也将始终存在。我想这就是你要找的东西？

【讨论】：