使用useNavigate钩子后如何实现独立页面跳转渲染

问题原因 #

你当前的App组件中，TopHeader、SlideShow、Content、Cards、Footer这些主页面元素直接放在Router内部但Routes外部，这意味着无论当前路由是什么，这些元素都会始终渲染，所以跳转后目标页面内容会和它们叠加显示。

解决方案 #

把主页面的内容封装成单独组件，然后在Routes中添加根路径路由，让主内容和其他页面路由平级，路由切换时只会渲染对应路径的组件。

步骤1：创建Home组件 #

新建components/Home.js文件，将原App里的主内容移进去：

import React from 'react';
import TopHeader from './TopHeader';
import SlideShow from './SlideShow';
import Content from './Content';
import Cards from './Cards';
import Footer from './Footer';

const Home = () => {
  return (
    <>
      <TopHeader />
      <SlideShow />
      <Content />
      <Cards />
      <Footer />
    </>
  );
};

export default Home;

步骤2：修改App组件的路由配置 #

更新App.js，将主内容替换为根路径的Route，所有路由都放在Routes内部：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Portofoliu from './pages/Portofoliu';
import Universitate from './pages/Universitate';

const App = () => {
  return (
    <div>
      <Router>
        <Routes>
          {/* 根路径渲染主页面 */}
          <Route path='/' element={<Home />} />
          {/* 其他页面路由 */}
          <Route path='/portofoliu' element={<Portofoliu />} />
          <Route path='/universitate' element={<Universitate />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

可选优化：全局共享元素 #

如果希望TopHeader、Footer这类元素在所有页面都显示，只需把它们放在Routes外面、Router内部即可：

const App = () => {
  return (
    <div>
      <Router>
        <TopHeader /> {/* 所有页面都显示头部 */}
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/portofoliu' element={<Portofoliu />} />
          <Route path='/universitate' element={<Universitate />} />
        </Routes>
        <Footer /> {/* 所有页面都显示底部 */}
      </Router>
    </div>
  );
};

修改完成后，点击按钮跳转时，就只会渲染对应页面的内容，不会再和主页面元素重叠。

内容的提问来源于stack exchange，提问作者Radulescu Mihai-Alexandru