时间戳

首页 > 解决方案 > 在新窗口中打开的反应导航栏菜单项

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

问题描述

在我的 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);

标签： reactjsreact-router-bootstrap

解决方案

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

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 路由器文档

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

推荐阅读