Question

我有一个问题，即当我更改路线时，如何保持navbar和footer组件在路由更改时保持稳定，所以当我从navbar单击某些页面时，所有页面都会用navbar和footer刷新。

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

这是我的应用程序组件：

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;

我在此处将navbar和footer放在路由器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;

Answer 1

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

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

1 个答案: