React点击按钮路由跳转新页面时组件仅渲染在首页下方如何解决

• 路由层级和组件布局逻辑错误：你当前把<Link>按钮和<Routes>路由出口都写在了App组件根层级，所以不管路由匹配到什么路径，App组件里除了Routes之外的其他内容（也就是你那个ORDER NOW按钮）永远都会显示。而且你设置了target="_blank"打开新标签页，新标签页依然会加载完整的App组件，自然会带上App的全部原有内容。
• 路由路径配置重复：你当前首页和要跳转的Store组件都用了path="/"这个根路径，逻辑上没有区分首页和目标页面的路由，就算跳转也没法匹配到独立的页面路由。
• 需求冲突：你同时提到“路由到新页面展示”和“组件仅出现在原页面按钮下方”，这两个是完全不同的需求，需要先明确需求再调整。
• 额外说明：不需要给按钮加onClick事件，Link组件本身已经封装了路由跳转逻辑，不会引发重复渲染或逻辑冲突，你的担心是不必要的。

情况1：点击按钮打开新标签页，新页面只显示Store组件，不显示原App其他内容 #

首先调整路由配置，给Store组件分配独立路径，同时把App原有首页内容单独抽成一个首页组件对应根路径：

App.js代码 #

import { BrowserRouter, Routes, Route } from 'react-router-dom';
// 引入首页组件（把你原来App里除了路由之外的内容都抽成Home组件）
import Home from './Home';
import Test from './Store';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 根路径对应原首页内容 */}
        <Route path="/" element={<Home />} />
        {/* 独立路径对应Store组件 */}
        <Route path="/store" element={<Test />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home.js代码（新建文件，存放原App的非路由内容） #

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

function Home() {
  return (
    <div>
      {/* 这里放你原来App里除了路由之外的所有内容 */}
      <Link to="/store" target="_blank">
        <button>ORDER NOW</button>
      </Link>
    </div>
  );
}

export default Home;

调整后点击按钮打开的新标签页路径为/store，只会渲染Test组件，不会显示原首页内容。

情况2：点击按钮不跳转新页，Store组件仅出现在当前页面按钮下方 #

直接去掉target="_blank"，调整路由匹配逻辑即可，不需要额外抽离组件：

import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
import Test from './Store';

function App() {
  return (
    <BrowserRouter>
      {/* App原有固定内容 */}
      <Link to="/store">
        <button>ORDER NOW</button>
      </Link>
      {/* 路由出口，匹配到路径才会渲染Test组件 */}
      <Routes>
        <Route path="/store" element={<Test />} />
      </Routes>
    </BrowserRouter>
  );
}

点击按钮后路径切换为/store，Test组件会直接显示在按钮下方，其他原有内容保持不变。

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