CODEWITHSUNDEEP
react-routernavbarreact-bootstrap
Emixam23
Emixam23

Reputation: 3964

React Router Bootstrap and Navbar redirection

I read so much today and yesterday and I am totally stuck in my development. In order to learn React.Js, I am making a simple website that displays pictures and description by categories. The problem I am facing is the link between my NavItems (of the navbar) and the redirections.

I have this router in my index.js:

render((
    <Router history={hashHistory}>
      <Route path="/" component={App}>
        <IndexRedirect to="/index" />
        <Route path="/index" component={Home}/>
        <Route path="/dogs" component={Dogs}/>
        <Route path="/cats" component={Cats}/>
      </Route>
    </Router>
  ), document.getElementById('app'))

Navbar.js:

import React from 'react'
import { 
    Navbar as BoostrapNavBar,
    Nav,
    NavItem,
    MenuItem,
    NavDropdown,
    Jumbotron, 
    Button } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

export default class Navbar extends React.Component {
    render () {
        return (
            <BoostrapNavBar inverse collapseOnSelect>
                <BoostrapNavBar.Header>
                    <BoostrapNavBar.Brand>
                        <a href="#">{this.props.navbar_title}</a>
                    </BoostrapNavBar.Brand>
                    <BoostrapNavBar.Toggle />
                </BoostrapNavBar.Header>
                <BoostrapNavBar.Collapse>
                    <Nav pullRight>
                        <NavItem href="/dogs">Dogs</NavItem> 
                        <NavItem href="/cats">Cats</NavItem> 
                    </Nav> 
                </BoostrapNavBar.Collapse>
            </BoostrapNavBar>
        );
    }
}

So my site render but, if I click one of my navitems, then a message will appear: Cannot GET /dogs.

So, I began to search on the internet about how does navbar works with react-router and... I got so many answers, but I can't make it work, I don't get why. I tried LinkContainer but something is wrong with history, so I check my Router in index.js without any success.

I read some articles about <Switch>, <Browser>, etc, but same, no success :( any idea?

Thanks for any help

Upvotes: 1

Views: 4611

Answers (1)

HighHopes
HighHopes

Reputation: 2102

Could you do something like this?

import { Link } from 'react-router-dom';
import { NavBar, Nav, NavItem} from 'react-bootstrap';

...

<Nav>
    <NavItem componentClass={Link} href="/dogs" to="/dogs" active={location.pathname === '/dogs'}>Dogs</NavItem>
    <NavItem componentClass={Link} href="/cats" to="/cats" active={location.pathname === '/cats'}>Cats</NavItem>
</Nav>

Gotten from here

Upvotes: 2

Related Questions