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

标签 react-router navbar react-bootstrap

我今天和昨天读了很多书,我完全陷入了我的发展。为了学习 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>等,但同样,没有成功:(知道吗?

谢谢你的帮助

最佳答案

你能做这样的事情吗?

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 - React Router Bootstrap 和 Navbar 重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48330233/

相关文章:

javascript - 单击时删除项目并将这些项目移动到列表底部

javascript - 由于缺少 &lt;script&gt;,无法看到“关于”页面路由,但能够到达“主页”路由

javascript - Bootstrap 选择元素未使用 React-router 渲染

css - Twitter Bootstrap 独立导航栏菜单项颜色

html - 将 NavBar 中心与宽度 :100%; 对齐

css - 设置 Laravel 5 cookie,以便 CSS 动画仅在第一次访问时运行

javascript - 单选按钮不会更新 NavItem 中的 UI

reactjs - React-Bootstrap 背景色

javascript - React 路由组件类型错误 : history is undefined

javascript - 助焊剂/助焊剂 : Updating routes based on state change