如何使用bootstrap Nav在reactjs中打开其他页面

Question

我是reactjs的新手，我想用我编码的NavBar函数链接我的所有页面。当我点击"公司"按钮时，URL正确地变为"http://localhost:3000/companies.js但页面本身并没有改变。。。这是导航栏代码：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';

export default function NavBar() {
const handleSelect = (eventKey) => {
let path={eventKey};
window.location=path;
};
return (
<Nav variant="pills" activeKey="/index.js" onSelect={handleSelect}>
<Nav.Item>
<Nav.Link eventKey="/index.js" href="/index.js">
Home
</Nav.Link>          
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="/login.js" href="/login.js">
Login
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="/companies.js" href="/companies.js">
Companies
</Nav.Link>
</Nav.Item>
</Nav>
);
}

下面是我的Companies.js代码作为示例：

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import {ImageGrid} from './charts.js';
import NavBar from './navbar.js';

ReactDOM.render(<div>
<NavBar />
<ImageGrid />
</div>, document.getElementById('root'));

Answer 1

您没有将组件与相应的链接绑定。

你在companies.js中编写的代码是错误的。此代码应仅在App.js中。

要从一个页面导航到另一个页面，您应该安装react路由器，然后用特定的链接绑定每个组件。然后你就可以访问这个页面了。

请访问下面的媒体链接，在那里你可以很容易地理解它。希望你能找到解决方案。

https://medium.com/how-to-react/use-react-router-link-with-bootstrap-315a8b88e129

https://faiizii992.medium.com/creating-a-navbar-using-react-router-dom-and-react-bootstrap-react-router-bootstrap-e6b59015a5ec