React Router问题：点击导航栏按钮时如何仅显示组件内容而非App.js内容？

问题原因 #

你的代码中，presentation和part2区域的内容直接写在Router内部，不受任何路由规则管控，因此无论跳转到哪个路由，这些内容都会持续渲染，导致和目标路由组件内容叠加显示。

解决方案 #

将首页专属内容抽离为独立组件，通过路由规则控制不同路径的渲染内容，确保跳转后仅显示目标组件。

步骤1：创建Home组件 #

把App中原本的首页内容（不含路由配置）抽成Home.js：

import React from 'react';
import { Link } from 'react-router-dom';
import gifImage from './output-onlinegiftools.gif';
import './App.css';

function Home() {
  return (
    <>
      <div className='presentation'>
        <nav>
          <Link to='/About' className='link'><h1>app</h1></Link>
          <div className='login'>
            <Link to="/CA" className="link"><p>Create Account</p></Link>
            <Link to="/Login" className="link"><button>Login Now</button></Link>
          </div>
        </nav>
        <h1 className='h11'>********* <br /> ********</h1>
        <div className="GIF">
          <img src={gifImage} alt="Example GIF" />
        </div>
      </div>

      <div className='part2'>
        <p className="new">New Features Available</p>
        <h1>**************</h1>
        <p>******************************************************** <br /> **************************** <br />******************** <br /> **********..</p>
        <button>Login for More</button>
      </div>
    </>
  );
}

export default Home;

步骤2：修改App.js路由配置 #

调整路由规则，让所有页面内容都由路由控制：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import About from './AboutPage/About';
import Login from './Login';
import CA from './CA';
import Home from './Home';
import './App.css';

function App() {
  return (
    <div className='App'>
      <Router>
        <Routes>
          {/* 根路径显示首页内容 */}
          <Route path="/" element={<Home />} />
          <Route path="/About" element={<About />} />
          <Route path="/Login" element={<Login />} />
          <Route path="/CA" element={<CA render={true} />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

可选调整：全局保留导航栏 #

如果希望所有页面都显示导航栏，可将导航栏移至Router下、Routes外：

import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import About from './AboutPage/About';
import Login from './Login';
import CA from './CA';
import Home from './Home';
import './App.css';

function App() {
  return (
    <div className='App'>
      <Router>
        {/* 全局导航栏，所有页面都会显示 */}
        <nav>
          <Link to='/' className='link'><h1>app</h1></Link>
          <div className='login'>
            <Link to="/CA" className="link"><p>Create Account</p></Link>
            <Link to="/Login" className="link"><button>Login Now</button></Link>
          </div>
        </nav>
        
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/About" element={<About />} />
          <Route path="/Login" element={<Login />} />
          <Route path="/CA" element={<CA render={true} />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

这样修改后，跳转至/Login或/CA时，页面只会渲染对应组件的内容，首页内容仅在根路径/下显示。

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