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

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

所以我的网站会渲染，但是，如果我点击其中一个导航资讯，则会显示一条消息：Cannot GET /dogs。

所以，我开始在互联网上搜索navbar如何与react-router一起工作......我得到了很多答案，但是我不能让它工作，我不明白为什么。我尝试了LinkContainer，但历史记录有问题，所以我在index.js中检查了Router但没有成功。

我阅读了一些关于<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

React Router Bootstrap和Navbar重定向

1 个答案: