react-router - React Router Bootstrap 和 Navbar 重定向

Question

我今天和昨天读了很多书，我完全陷入了我的发展。为了学习 React.Js，我制作了一个简单的网站，按类别显示图片和描述。我面临的问题是我的 NavItems(导航栏)和重定向之间的链接。

我的 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'))

导航栏.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>
        );
    }
}

所以我的网站呈现，但是，如果我单击我的导航项之一，则会出现一条消息: Cannot GET /dogs .

所以，我开始在互联网上搜索导航栏如何与 react-router 一起工作，......我得到了很多答案，但我无法让它工作，我不明白为什么。我试过 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>

来自 here