Как сделать исправление в navbar и footer

Question

У меня есть вопрос о том, как сохранить стабильность компонентов navbar и нижнего колонтитула при изменении маршрута, теперь, когда я меняю маршрут, поэтому, когда я нажимаю какую-либо страницу из 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:

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

Я не уверен насчет интеграции бутстрапов с реагирующим роутером dom.

В идеале вы должны использовать Link из react-router-dom

, поэтому в вашей навигационной панели import { Link } from 'react-router-dom'

и при изменении NavItem на

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

Это не обновит страницу, но вместо этого обновит компонент (просмотр)

Надеюсь, это поможет вам.:)

Answer 2

Я думаю, что вы должны поместить панель навигации и нижний колонтитул за пределы маршрутизатора, чтобы они всегда были там, даже когда вы меняете маршруты.Я думаю, это то, что вы ищете?