Reactjs 导航栏和页脚如何在react中固定

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

我想在某个地方我犯了一个错误

这是我的应用程序组件：

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;

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;

类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

我把导航栏和页脚放在路由器交换机标签外面，对吗

它是导航栏组件：

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;

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;

从“React”导入React；
从“react bootstrap”导入{Navbar、Nav、按钮、容器、NavItem}；
常量NavbarComp=（）=>
标志
我们是谁
解决方案
导出默认NavbarComp；

我认为你应该把导航栏和页脚放在路由器外面，这样即使你改变路线，它们也会一直在那里。我想这就是您想要的？

我不确定react引导与react路由器dom的集成

理想情况下，您应该使用

react-router-dom

因此，在您的导航栏

中，从'react router dom'导入{Link}

并将

NavItem

更改为

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

解决方案

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

---

希望这对您有所帮助。：）

请分享您的导航条形码，以便更好地了解redirection@Helpnavbar组件更新了答案谢谢，很乐意帮助：）