为何点击Link后Register组件与Landing页面同屏渲染？

你的问题出在路由组件的结构设计上：当前Navbar和Landing组件被直接放在Router的根层级下，不管当前路由是什么，这两个组件都会被渲染。当你跳转到/register时，Routes匹配到Register组件并渲染，但Navbar和Landing并没有消失，所以就出现了Register显示在它们下方的情况。

修改App.js的路由结构，将Landing组件放到根路径的路由中，让不同的路由对应独立的页面内容：

import './App.css';
import { Fragment } from 'react';
import Navbar from './components/layout/Navbar';
import Landing from './components/layout/Landing';
import Register from './components/auth/Register';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Router>
        <Fragment>
          {/* Navbar 全局显示，所有页面都保留 */}
          <Navbar/>
          <Routes>
            {/* 根路径只渲染 Landing */}
            <Route path='/' element={<Landing />} />
            {/* /register 路径只渲染 Register */}
            <Route path='/register' element={<Register />} />
          </Routes>
        </Fragment>
      </Router>
    </div>
  );
}

export default App;

• 确保你的跳转按钮使用的是react-router-dom提供的<Link>组件，而不是原生的<a>标签，否则会触发页面刷新：

  import { Link } from 'react-router-dom';
  
  // 在 Landing 组件中使用 Link 跳转
  <Link to="/register" className="btn">注册</Link>
  

• 如果需要Navbar只在某些页面显示，可以将它放到对应的路由组件内部，或者通过路由判断来控制显示。

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