为什么React.js无法在新窗口单独渲染Resume组件？

你当前的代码将首页所有公共组件直接写在了路由匹配规则<Switch>的外层，因此无论访问站点下的任何路径，这些组件都会被全局渲染，访问/resume路径时自然也会带着首页内容一起显示。

第一步：调整路由结构，拆分首页和简历页的渲染逻辑 #

修改你的App.js代码如下：

import {
  Navbar,
  Home,
  Projects,
  Aboutme,
  Contact,
  Footer,
  Resume,
} from "./imports";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <div id="app">
        <Switch>
          {/* 根路径渲染首页全部内容 */}
          <Route exact path="/">
            <Navbar />
            <Home />
            <Projects />
            <Aboutme />
            <Contact />
            <Footer />
          </Route>
          {/* /resume路径只渲染简历组件 */}
          <Route exact path="/resume">
            <Resume />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

第二步：添加新窗口打开的入口 #

在你需要放置简历入口的位置（比如导航栏组件内）添加跳转链接，加上target="_blank"属性即可实现点击后在新窗口打开简历页：

import { Link } from "react-router-dom";

// 在组件渲染部分添加
<Link to="/resume" target="_blank" rel="noopener noreferrer">
  查看我的简历
</Link>

rel="noopener noreferrer"属于前端安全最佳实践，用来避免新窗口跳转带来的潜在安全风险。

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