Question

我正在做一个项目。我上面有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> 其实idk href是什么？所以，我将其删除并添加“至”

Answer 1

此代码对我有用：

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

Answer 2

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

Answer 3

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

Answer 4

我发现应该是我的错误；

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

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

实际上我需要了解href的作用是什么

Answer 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来进行虚拟操作]

react-bootstrap导航链接

5 个答案: