react-bootstrap nav.link 路由答案

【问题标题】：react-bootstrap nav.link routingreact-bootstrap nav.link 路由
【发布时间】：2019-11-28 08:56:05
【问题描述】：

我正在做一个项目。我有 navbar 和 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 ？所以，我删除它并添加“到”

【问题讨论】：

标签： reactjs react-router react-bootstrap

【解决方案1】：

此代码适用于我：

<Nav.Link as={Link} to="/home" >Home</Nav.Link>

【讨论】：

【解决方案2】：

我发现应该是我的错误；

<LinkContainer to="/price">
     <Nav.Link >Price</Nav.Link>
</LinkContainer>

如果有人有这样的问题，我把这个问题留在这里。

其实我需要了解一下href是干什么用的？

【讨论】：

href 是简单的 html 属性，path/to 是反应元素属性。

【解决方案3】：

在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>

【讨论】：

谢谢，请找到我自己的答案。你们的有区别吗？或者这些只是不同符号的相同事物？

【解决方案4】：

尝试用户 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";

【讨论】：

【解决方案5】：

问题在于 react-bootstrap (based on BS-v3) 这曾经可以工作：

<Nav>
  <LinkContainer to="/routeA"><NavItem>My RouteA</NavItem></LinkContainer>
  <LinkContainer to="/routeB"><NavItem>My RouteB</NavItem></LinkContainer>
</Nav>

但对于react-bootstrap (based on BS-v4)，开发人员将其更改为

<Nav>
  <LinkContainer to="/routeA"><Nav.Link>My RouteA</Nav.Link></LinkContainer>
  <LinkContainer to="/routeB"><Nav.Link>My RouteB</Nav.Link></LinkContainer>
</Nav>

*注意LinkContainer来自react-router-bootstrap

[我找不到这个官方文档，我不知道如何做拉取请求，我需要Github for dummies]

【讨论】：