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

Posted 2023-02-21

【中文标题】在新窗口中打开的反应导航栏菜单项

【英文标题】：React navigation bar menu item that opens in a new window

【发布时间】：2020-08-12 16:58:55

【问题描述】：

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

我目前正在使用 react-bootstrap 的导航栏，其中包含 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);

【问题讨论】：

正如@Quentin Grisel 在他的 cmets 中提到的那样。事实上，这也得到了回答here

【参考方案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 路由器并了解它是如何工作的。这是文档的链接，设置起来非常简单：React router documentation

另外，这里有一个线程解释了我所说的完全相同的问题：How to use react-router-bootstrap linkcontainer

【讨论】：

感谢您的意见。我确实设置了路线。但是这些链接将我带到同一页面上的那些路线。有没有办法将 Route 组件设置为转到新选项卡或窗口？

这是另一个类似问题的链接，以前从未尝试过，但看起来有带有 a 标签的解决方案：***.com/questions/30202755/…

特别是适合您需求的答案：***.com/a/58091340/9868549

谢谢，昆汀。出于某种原因，似乎唯一对我有用的是这个：***.com/a/33139502/3368818

好的，很高兴我能帮上忙 :)