Блог

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

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

У меня есть мой завернутый в роутер.

Вот мой код для 3 соответствующих компонентов.

У вас есть какой-нибудь другой способ заставить это работать ?

    

    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>
);
 

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

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

Хорошо, я понял, в чем дело, мне нужен браузер между моими домашними компонентами, я не совсем понимаю, почему, но он работает ! Надеюсь, это поможет некоторым людям 🙂 Проблема решена !

 <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>