React路由问题：登录注册页面导航异常，内容全部显示在同一页面

问题根源 #

1. 你的<Routes>组件嵌套在首页的App-header容器内，导致首页的标题、登录/注册按钮会始终渲染，无法随路由切换隐藏。
2. 未配置根路径(/)的路由规则，缺少默认显示的首页内容逻辑。
3. LoginPage按钮的href='#'会触发浏览器默认跳转行为，干扰React Router的客户端导航。

修改后的代码 #

App.js

import './App.css';
import React, { Component } from 'react';
import { Typography } from '@material-ui/core'
import Button from '@mui/material/Button';
import {
  BrowserRouter as Router,
  Route,
  Routes, Link 
} from "react-router-dom";
import LoginPage from './componenets/login/LoginPage';
import Register from './componenets/Register/Register';

// 封装首页组件
class HomePage extends Component {
  render() {
    return (
      <div className='App-header'>
        <Typography variant="h1" component="h2">
          Live Chat
        </Typography>
        <div className='group_btn'>
          <div className='btn'>
            <Link to='/login'>
              <Button className='btn_s' variant="contained" color='success' size="large">
                Login 
              </Button>
            </Link>
          </div>
          <div className='btnc'>
            <Link to='/register'>
              <Button className='btn_s' variant="contained" color='success' size="large">
                Register 
              </Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        {/* 路由渲染区域，仅显示当前匹配的路由组件 */}
        <Routes>
          <Route path='/' element={<HomePage />} />
          <Route path='/login' element={<LoginPage />} />
          <Route path='/register' element={<Register />} />
        </Routes>
      </Router>
    );
  }
}

export default App;

LoginPage.js

import React, { Component } from 'react'
import './LoginPage.css'
import { Typography } from '@material-ui/core'
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

class Login_Page extends Component {
  render() {
    return (
      <div className='lgn'>
        <div className='title'>
          <Typography variant="h1" component="h2">
            Live Chat
          </Typography>
        </div> 
        <div className='lgn_inputs'>
          <Box
            component="form"
            sx={{
              '& > :not(style)': { m: 1, width: '45ch' },
            }}
            noValidate
            autoComplete="off"
          >
            <TextField id="outlined-basic" label="Username" variant="outlined" />
            <TextField id="outlined-basic" label="Email" variant="outlined" />
            <TextField id="outlined-basic" label="Password" variant="outlined" />
          </Box>
        </div>
        <div className='btn'>
          {/* 移除href="#"，避免干扰客户端导航 */}
          <Button className='btn_s' onClick={() => alert('You are Logged in')} variant="contained" color='success' size="large">
            Login 
          </Button>
        </div>
      </div>
    );
  }
}

export default Login_Page;

关键说明 #

• 将首页UI封装为独立组件HomePage，作为根路径的渲染内容，确保路由切换时首页元素会被替换。
• 调整路由路径为更规范的/login、/register，若需保留原路径，只需保持Link的to属性与Route的path一致即可。
• 移除LoginPage按钮的href='#'，避免触发浏览器默认跳转逻辑。

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