在新窗口中打开的React导航栏菜单项

Question

在我的React应用程序中，我试图添加一个在新浏览器窗口中打开的导航菜单项。我知道这似乎是一种奇怪的方法，因为如果它把你带到一个新窗口，它就不完全是导航。但目标是让菜单选项与导航栏的其余部分一起出现在应用程序的所有页面上。

我目前正在使用react bootstrap的Navbar，其中包含react router bootstrap LinkContainers。我尝试使用Nav.Link和NavItem(分别使用(target="_blank">，但两者都无法在新窗口中打开页面。

import React, { Component } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
class Header extends Component {
...
render() {
return (
<div>
<Navbar>
<Nav>
<!-- other LinkContainer items here ... -->
<LinkContainer to="/SomePage" >
<Nav.Link target="_blank">page</Nav.Link> <!-- opens in same tab -->
<NavItem  target="_blank">page</NavItem>  <!-- as does this      -->
</LinkContainer>
</Nav>
</Navbar>
</div>
);
}
}
export default withRouter(Header);

Answer 1

您不需要在新窗口中打开链接，只需要在路由器中打开即可。您的链接将触发一条路由。此路线将显示在您定义的位置。它看起来像这样：

const App = () => {
return (
<Router>
<Header /> // Here, your Header will be available on every route
<Switch>
<Route exact path='/' component={Home} />
<Route path='/route1' component={Route1} />
<Route path='/route2' component={Route2} />
</Switch>
</Router>
);
};

你将需要反应路由器和学习它是如何工作的。这是文档的链接，设置起来很容易：React路由器文档

此外，这里有一个线程解释了我所说的完全相同的问题：如何使用反应路由器引导链接容器