React Router - NavLink 不在新窗口中打开链接，而是在当前页面内容下方打开

Question

我有 2 个类组件，两者都运行良好。

我的 2 个组件：

1. 组件A
2. NewComponentB（路径：“/api/pages/components/new”）

这是我的代码：

import {BrowserRouter as Router, Route, Switch, NavLink} from 'react-router-dom';
import {Button} from 'react-bootstrap';

export default class ComponentA extends React.props{
   constructor(props){
       super(props);
   }



   render(){
      return(
         <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
                <div className="d-block mb-4 mb-md-0">
                    <Router>
                        <NavLink exact to="/api/pages/components/new">
                            <Button id="addComponent" className="btn btn-dark rounded-circle btn-lg">+</Button>
                            <Route path="/api/pages/components/new" component={NewComponentForm}/>
                        </NavLink>
                    </Router>
                </div>
          </div>
        );
     }


}

我得到了什么：

页面导航到新页面的链接：“/api/pages/components/new”，我在当前所在的同一页面中的当前内容下方显示页面内容。

我想要什么： 我想让按钮/链接导航到上述链接“/api/pages/components/new”的新页面？

（侧面）我试过了，我尝试在 Switch 标记内添加 Route，但没有奏效：

 render(){
          return(
             <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
                    <div className="d-block mb-4 mb-md-0">
                        <Router>
                            <NavLink exact to="/api/pages/components/new">
                                <Button id="addComponent" className="btn btn-dark rounded-circle btn-lg">+</Button>
                            </NavLink>
                        </Router>
                        <Switch>
                           <Route path="/api/pages/components/new" component={NewComponentForm}/>
                        </Switch>
                    </div>
              </div>
            );
 }

Answer 1

你试过了吗？

<div className="d-block mb-4 mb-md-0">
  <Router>
    <NavLink target="_blank" rel="noopener noreferrer" to="/api/pages/components/new">
      <Button id="addComponent" className="btn btn-dark rounded-circle btn-lg">+</Button>
    </NavLink>
  </Router>                     
</div>