我是新來的，也是 ReactJS 的新手。
在這里，我使用 Reactjs 中的 bootstrap 導航欄組件創建了一個導航欄。
<Navbar collapseOnSelect expand="lg">
<Container>
<Navbar.Brand to={"/"}>Rental</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav>
<Nav.Link to="/" >
<FontAwesomeIcon
icon={faHome}
/> Home
</Nav.Link>
<Nav.Link to="/login" >
<FontAwesomeIcon
icon={faUser}
/> Login/ Registration
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
當我轉到瀏覽器并檢查它時，它顯示如下：
<a to="/" role="button" class="nav-link" tabindex="0">Home</a>
并且鏈接不起作用。
如何解決？
uj5u.com熱心網友回復：
將您的代碼包裝在路由器中，確保您在 App 或 ReactDOM.render 中執行此操作：
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
rootElement
);
您正在渲染 react-bootstrap 的 Nav.Link 而不是 react-router 的 Link 組件，因此路由器不會接收您的路由更改。
react-bootstrap 在它的大部分組件中都提供了一個 render prop 來指定我們想要渲染哪個組件或元素，如果我們不想要默認的。
嘗試做出這些改變！
import { Switch, Route, Link } from 'react-router-dom';
<Navbar.Brand as={Link} to="/" >Rental</Navbar.Brand>
<Nav.Link as={Link} to="/" >
<FontAwesomeIcon icon={faHome}/>
Home
</Nav.Link>
<Nav.Link as={Link} to="/login" >
<FontAwesomeIcon icon={faUser}/>
Login/ Registration
</Nav.Link>
uj5u.com熱心網友回復：
看起來您正在渲染 react-bootstrap 的 Nav.Link 而不是 react-router 的 Link 組件，因此路由器沒有接收您的路由更改。
因此，從反應路由器匯入 Link 并使用它應該可以解決問題。
import { Link } from 'react-router-dom';
<Nav.Link as={Link} to="/" >
<FontAwesomeIcon
icon={faHome}
/> Home
</Nav.Link>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320826.html
標籤：javascript 反应 推特引导 导航