ReactJS点击按钮切换不同视图实现方法问询

问题出在你将路由规则嵌套在了HomePage组件内部，导致HomePage的内容会持续渲染，新视图只是追加在其后面。要实现完全切换视图，需要调整路由结构，将路由配置提升到App层级：

1. 修改App.js #

引入BrowserRouter（提供路由上下文），并在App中配置所有路由规则：

import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './components/HomePage';
import Service1 from './components/Service1';

function App() {  
  return (
    <BrowserRouter>
      <div className="container-fluid vh-100">
        <Routes>
          {/* 根路径对应HomePage */}
          <Route path="/" element={<HomePage />} />
          {/* /service1路径对应Service1 */}
          <Route path="/service1" element={<Service1 />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

2. 修改HomePage组件 #

移除内部的Routes和Route，只保留导航逻辑：

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

function HomePage() {
  const navigate = useNavigate();

  const navigateToService1 = () => {
    navigate('/service1');
  }

  return (
    <div className="row">
      <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 vh-100 bg-danger">
      </div>

      <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 vh-100 bg-warning">
        <button className="btn btn-lg btn-success" onClick={navigateToService1}>Service1</button>
      </div>        
    </div>
  )
}

export default HomePage;

原理说明 #

• BrowserRouter是路由的顶层容器，必须包裹所有路由相关组件，提供路由上下文。
• Routes是路由规则的容器，同一时间只会渲染匹配到的第一个Route元素，这样不同路径对应的页面组件就会完全替换，而不是追加。
• 当点击按钮调用navigate('/service1')时，路由会匹配到/service1对应的Service1组件，替换掉原来的HomePage组件，实现完全视图切换。

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