CODEWITHSUNDEEP
reactjsreact-routernavigationreact-router-bootstrap
Jérome BORGA
Jérome BORGA

Reputation: 695

navbar react router with bootstrap not working

I'm having a issue with react-router-bootstrap not working as intended and i can't figure out why (it's working on another project)

The URL change when I click on navbar icon ("localhost:3000" for logo img for example) but its not finding the component to display, so it's not changing for the component. And when i type ENTER with the localhost:3000 in my url bar, it get me back to desired component.

I have my wrapped in Router.

Here is my code for the 3 concerned components.

Have you any other way to make this work ?

   

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

Feel free to ask any other part of code if you have doubts.

Thanks in advance.

Upvotes: 0

Views: 70

Answers (1)

J&#233;rome BORGA
J&#233;rome BORGA

Reputation: 695

Ok so i figured what was wrong, i neede da BROWSERROUTER between in my Home components I don't quite understand why but it's working ! Hope it will help some people :) Problem solved !

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

Upvotes: 0

Related Questions