React Router Bootstrap и перенаправление Navbar

Question

Я так много читаю сегодня и вчера, и я полностью застрял в своем развитии. Для того, чтобы выучить React.Js, я делаю простой сайт, который отображает картинки и описания по категориям. Проблема, с которой я сталкиваюсь, - это связь между моими навигационными элементами (панели навигации) и перенаправлениями.

У меня есть этот маршрутизатор в моем 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>
        );
    }
}

Так что мой сайт отображается, но, если я нажму на один из моих navitems, появится сообщение: Cannot GET /dogs,

Итак, я начал искать в интернете информацию о том, как navbar работает с реактивом-маршрутизатором и... у меня так много ответов, но я не могу заставить его работать, я не понимаю, почему. Я старался LinkContainer но что-то не так с историей, поэтому я проверяю Router в index.js безуспешно.

Я прочитал несколько статей о <Switch>, <Browser>и т. д., но так же, безуспешно:(Есть идеи?

Спасибо за любую помощь

Answer 1

Не могли бы вы сделать что-то подобное?

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>

Получил отсюда