React应用路由跳转异常：搜索结果未跳转至新页面

问题原因 #

你的App.js中，主页的header内容（logo、搜索栏、说明文字等）直接放在了Router的根容器内，没有作为单独的路由组件。这意味着无论路由如何切换，header内容都会始终渲染，而SearchResultsPage会被渲染在header的下方，导致了“内容展示在主页下方”的问题。

解决方案 #

将主页内容封装为一个独立的路由组件（比如HomePage），然后通过Routes管理不同路由的组件渲染，让主页和搜索结果页互斥显示。

修改后的App.js代码 #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import SearchBar from './ui-components/SearchBarNew';
import PlanDisplay from './ui-components/planDisplay';
import React from 'react';
import { withAuthenticator } from '@aws-amplify/ui-react';
import SearchResultsPage from './SearchResultsPage';

// 封装主页为独立组件
function HomePage() {
  return (
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <SearchBar />
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn React
      </a>
    </header>
  );
}

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          {/* 主页路由 */}
          <Route path="/" element={<HomePage />} />
          {/* 搜索结果页路由 */}
          <Route path="/search-results/:term" element={<SearchResultsPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default withAuthenticator(App);

说明 #

• 把原来的header内容移到了HomePage组件中，作为根路由/对应的渲染内容。
• Routes现在管理两个互斥的路由：访问/时显示主页，访问/search-results/:term时只显示搜索结果页，不会再同时渲染主页内容。
• 你的SearchBar组件中的navigate逻辑无需修改，它已经正确触发了路由跳转。

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