navbar реагирует на маршрутизатор с неработающей загрузкой

Question

У меня проблема с реакцией-маршрутизатором-начальной загрузкой, не работающей должным образом, и я не могу понять, почему (она работает над другим проектом)

URL-адрес изменяется, когда я нажимаю на значок навигационной панели (например, «localhost:3000» для логотипа img), но не находит компонент для отображения, поэтому он не меняется для компонента. И когда я набираю ENTER с localhost:3000 в строке URL-адресов, я возвращаюсь к желаемому компоненту.

Я завернул в роутер.

Вот мой код для трех компонентов.

Есть ли у вас другой способ заставить эту работу работать?

         

    const Navigation = () => (
      <Navbar>
        <LinkContainer to='/'>
          <Navbar.Brand>
            <img src={Logo} alt='logo' className='navbar-logo' />
          </Navbar.Brand>
        </LinkContainer>
    
        <Nav className='ml-auto'>
          <LinkContainer exact to='/newspost'>
            <Nav.Link>
              <div className='circle-icon bg-primary'>
                <FontAwesomeIcon icon={faNewspaper} size='lg' />
              </div>
            </Nav.Link>
          </LinkContainer>
          <Nav.Link href='#home'>
            <div className='circle-icon bg-primary'>
              <FontAwesomeIcon icon={faCalendar} size='lg' />
            </div>
          </Nav.Link>
          <Nav.Link href='#home'>
            <div className='circle-icon bg-primary'>
              <FontAwesomeIcon icon={faComments} size='lg' />
            </div>
          </Nav.Link>
          <Nav.Link href='#home'>
            <div className='circle-icon bg-primary'>
              <FontAwesomeIcon icon={faUser} size='lg' />
            </div>
          </Nav.Link>
        </Nav>
      </Navbar>
    );

      const Home = () => (
  <div className='container-home container-sm'>
    <Navigation />
    <Router>
      <Switch>
        <Route exact path='/' component={Dashboard} />
        <Route path='/newspost' component={Newspost} />
        <Route path='/calendar' component={Calendar} />
        <Route path='/calendar' component={Calendar} />
        <Route path='/newsmanage' component={Newsmanage} />
        <Route path='/newsform' component={Newsform} />
      </Switch>
    </Router>
    <Footer />
  </div>
);

Не стесняйтесь спрашивать любую другую часть кода, если у вас есть сомнения.

Заранее спасибо.

Answer 1

Хорошо, я понял, что не так, мне нужен BROWSERROUTER между компонентами Home. Я не совсем понимаю, почему, но он работает! Надеюсь, это поможет кому-то :) Проблема решена!

      <BrowserRouter>
      <Navigation />
      <Switch>
        <Route exact path='/' component={Dashboard} />
        <Route path='/newspost' component={Newspost} />
        <Route path='/calendar' component={Calendar} />
        <Route path='/calendar' component={Calendar} />
        <Route path='/newsmanage' component={Newsmanage} />
        <Route path='/newsform' component={Newsform} />
      </Switch>
    </BrowserRouter>