React应用中如何在新页面渲染组件？

React Router 的 <Link> 组件默认是单页应用内的客户端跳转，只会在当前页面更新组件，不会打开新页面。要实现点击链接后在新页面加载组件，你可以通过以下两种方式修改：

方式一：给 <Link> 添加新标签页属性 #

直接在 <Link> 上添加 target="_blank" 和安全属性 rel="noopener noreferrer"（防止潜在的安全风险）：

修改后的 App.jsx 关键代码：

<ul>
  <li>
    <Link to="/home" target="_blank" rel="noopener noreferrer">Home</Link>
  </li>
  <li>
    <Link to="/next" target="_blank" rel="noopener noreferrer">Nextquestion</Link>
  </li>
  <li>
    <Link to="/second" target="_blank" rel="noopener noreferrer">Secondquestion</Link>
  </li>
</ul>

方式二：使用原生 <a> 标签替代 <Link> #

用普通的 <a> 标签指定路由路径，同样添加新标签页和安全属性：

修改后的 App.jsx 关键代码：

<ul>
  <li>
    <a href="/home" target="_blank" rel="noopener noreferrer">Home</a>
  </li>
  <li>
    <a href="/next" target="_blank" rel="noopener noreferrer">Nextquestion</a>
  </li>
  <li>
    <a href="/second" target="_blank" rel="noopener noreferrer">Secondquestion</a>
  </li>
</ul>

注意事项 #

• 两种方式都能实现新页面加载组件，区别在于 <Link> 仍会保留 React Router 的部分特性（如路由预加载），而原生 <a> 是纯浏览器跳转。
• rel="noopener noreferrer" 是必须的安全配置，避免打开的新页面通过 window.opener 控制原页面。

内容的提问来源于stack exchange，提问作者Jhadtheelasainischalsatwikqame