React Router: How do I display only the component content without App.js content when clicking on the Navbar button?

I have a problem in my page.

I have a navbar containing a button that should take me to login page using router, but when I click on it, it did take me to "/login", but the content of login component adds to the content of App.js. Instead, I want just the content of the login component to show.

This is the App.js code :

import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes, Outlet } from 'react-router-dom';
import About from './AboutPage/About';
import Login from './Login';
import CA from './CA'
import './App.css'
import `gifImage` from './output-`onlinegiftools`.gif';


`function` App() {
  return (
    <div ``className``='App'>
    <Router>
            <div `className`='presentation'>
            <nav>
                <Link to='/About' `your text`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>
                <Outlet />
                </div>
            </nav>
            <h1 className='h11'>********* <br /> ********</h1>
            <div className="GIF">
              <img src={gifImage} alt="Example GIF" />
            </div>
            </div>

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

            <Routes>
                <Route path="/About" element={<About />} />
                <Route path="/Login" element={<Login />} />
                <Route path="/CA" element={<CA render={true} />} />
            </Routes>
        </Router>
    </div>
  );
}


export default App;

I want to display only the content of login and CA (create account) component when clicking on the navbar, but when I, do the content of App.js get displayed too

Extract the content to be shown on the home page to a separate component and render that only for the path /.

Home.js:

export default function Home() {
	return <>
		<h1 className='h11'>********* <br /> ********</h1>
		<div className="GIF">
		  <img src={gifImage} alt="Example GIF" />
		</div>
		{ /* move the code that should not be shown on every page here... */ }
	</>;
}

App.js:

function App() {
	// ...
	return (
		// other elements... (keep the common elements here)
		<Routes>
			<Route path="/" element={<Home />} />
			<Route path="/About" element={<About />} />
			<Route path="/Login" element={<Login />} />
			<Route path="/CA" element={<CA render={true} />} />
		</Routes>
	);
}

</details>