我正在做一个项目。我有导航栏和 nav.links。例如房屋、价格和功能。
我想在单击它时进行页面路由。这是我的代码。我做了通常的路由风格，但它不起作用。
<LinkContainer>
<Nav.Link to="/price" >Price</Nav.Link>
</LinkContainer>
以及我在 app.js 中的路由定义；
<Route path ="/price" exact component={Price}></Route>
我创建并导入 price.js 并导入它们。
我可以成功地在我的按钮上使用路由，但 nav.links 不起作用。任何的想法？
*顺便说一句，它最初是这样的。 <Nav.Link href="#price" >Price</Nav.Link>
其实我知道href是什么？所以，我删除了它并添加了“到”
这段代码对我有用：
<Nav.Link as={Link} to="/home" >Home</Nav.Link>
我发现我的错误应该是；
<LinkContainer to="/price">
<Nav.Link >Price</Nav.Link>
</LinkContainer>
如果有人有这样的问题，我把这个问题留在这里。
其实我需要了解什么是href？
在react-bootstrap你需要这样定义
<LinkContainer>
<Nav.Link href="/price" >Price</Nav.Link>
</LinkContainer>
代替
<LinkContainer>
<Nav.Link to="/price" >Price</Nav.Link>
</LinkContainer>
并使用 react-router-dom
<Link to="/price" >Price</Link>
或者
<NavLink to="/price" >Price</NavLink>
尝试用户react-router-dom而不是react-router
import { BrowserRouter, Route} from "react-router-dom";
像下面这样准备你的渲染，确保你的导航和路由都在 <BrowserRouter>...</BrowserRouter>
render() {
return (
<BrowserRouter>
<LinkContainer>
<Nav.Link to="/price" >Price</Nav.Link>
</LinkContainer>
<Route path ="/price" exact component={Price}></Route>
<BrowserRouter>
)
}
更新
你也可以使用Link而不是Nav.Link这样
<Link to="/price">Price</Link>
你只需要从 react-router-dom 导入它
import { BrowserRouter, Route, Link} from "react-router-dom";