在 React js 中调用 nav.link href 上的组件

Question

我是 reactjs 的新手，请帮我将组件 AddApiComp 分配给 navlink 的 href 以在页面加载时打开

import { Navbar,  Nav } from 'react-bootstrap';

import AddApiComp from "./";

function Navigfgation(){

return(

\<Navbar collapse \>

\<Navbar.Brand href="#"\>Developer API\</Navbar.Brand\>
    

 \<Navbar.Toggle aria-controls="responsive-navbar-nav"/\>

\<Navbar.Collapse id="responsive-navbar-nav"\>
\<Nav className="mr-auto"\>

\<Nav.Item\>

\<Nav.Link href="./Add-Api-Controller" title="Add Api"\>{AddApiComp}\</Nav.Link\>

\</Nav\>
\</Navbar.Collapse\>


\</Navbar\>
)
}

export default Navigation;

点击 ** 添加 API**，*AddApiComp *组件应显示

Answer 1

请查看 react router 在 React 应用程序中导航

Answer 2

React 没有固执己见，也不包含路由解决方案。这就是为什么您可以自由使用它们中的任何一个。最流行的解决方案是“React Router”。我已经使用您的代码实现了一个工作示例并对路由器 6 做出反应： https://codesandbox.io/s/react-router-6-example-ll16cx

请按照本教程了解实现：https://reactrouter.com/docs/en/v6/getting-started/tutorial

一个棘手的部分是您想要使用前端路由（无需重新加载页面，SPA），同时在链接上设置 bootstrap 样式。您可以通过使用 Nav.Link 并使用其 as 属性:

来实现此目的

import { Nav } from "react-bootstrap";
import { Link } from "react-router-dom";
<Nav.Link as={Link} to="/add-api-controller">

在 React js 中调用 nav.link href 上的组件

call component on nav.link href in react js

reactjs

react-bootstrap

react-navigation