我今天和昨天读了很多书,我完全陷入了我的发展。为了学习 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/