React Route element Showing all in one page-CodePudding

Im new to React and im trying build a live chat website , but i got stuck in the section of login and registration , im just trying to navigate between these 2 pages i will put my code under , if i did something wrong don't hesitate please :

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 App extends Component {
render() {
   return (
      <Router>
      <div className='App-header'>
        <Typography variant="h1" component="h2">
                Live Chat
        </Typography>
        <div className='group_btn'>
            <div className='btn'>
            <Link to='/logn'>
            <Button className='btn_s' variant="contained" color='success' size="large">
                Login 
              </Button>
              </Link>
            </div>
            <div className='btnc'>
            <Link to='/reg'>
            <Button className='btn_s'  variant="contained" color='success' size="large">
                Register 
              </Button>
              </Link>
            </div>
            <Routes>
              <Route path='/logn' exact element={<LoginPage/>}/>
              <Route path='/reg' exact element={<Register/>}/>
            </Routes>
        </div>
      </div>
      </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'>
      <Button className='btn_s' href='#' onClick={ () => alert('You are Logged in') } variant="contained" color='success' size="large">
          Login 
        </Button>
      </div>
    </div>
   );
  }
  }
  
export default Login_Page;

i've tried so many things like : Switch but it gives me blank page , i did use useNavigate and i got the same result like the code above.

CodePudding user response：

Try

<Route></Route>

instead of


<Route />

Let me know if that works

CodePudding user response：

Try to remove the Router that wraps the entire App component...