This is a question about setting up routing routes - reactjs

Question

import React from 'react';
import {Link, Route, BrowserRouter as Router, Switch} from "react-router-dom";
import './App.css';
import User from './Component/User';
import AdContent from './Component/AdContent';
//Home.js
function Home(){
return(
<Router>
<header>
<div>ShareAdsLink</div>
<nav>
<Link to="/User">
<li className="button">LogIn</li>
</Link>
<Link to="/AdContent">
<li className="button">SignUp</li>
</Link>
</nav>
</header>
<Switch>
<Route path="/User" component={User} />
<Route path="/Adcontent" component={AdContent}/>
</Switch>
</Router>
);
}export default Home;
//App.js
import React from 'react';
import Home from './Home';
import {Route, BrowserRouter as Router, Switch} from "react-router-dom";
function App() {
return (
<Router>
<Route path="/" component={Home} exact/>
</Router>
);
}
export default App;
What I'm trying to do is to show the default screen (the page you see as soon as you enter) in Home.
There are login and signup buttons in Home, and if i click this button, a new page should appear. But in my results, a new page should be opened, separate from the contents of Home, but the contents of Home will be displayed too.
How can I display a new page? Using exact keywords is useless.
That is my first question.
Secondly, can you give me advice on where(ex, App.js ,,) to configure the base screen?

Answer 1

Restructuring your app like this should help:
//App.js
import React from "react";
import Home from "./Home";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import User from "./Component/User";
import AdContent from "./Component/AdContent";
function App() {
return (
<Router>
<Route path="/" exact component={Home} />
<Switch>
<Route exact path="/User" component={User} />
<Route path="/Adcontent" component={AdContent} />
</Switch>
</Router>
);
}
export default App;
//Home.jsx
import React from "react";
import { Link } from "react-router-dom";
function Home() {
return (
<header>
<div>ShareAdsLink</div>
<nav>
<Link to="/User">
<li className="button">LogIn</li>
</Link>
<Link to="/AdContent">
<li className="button">SignUp</li>
</Link>
</nav>
</header>
);
}
export default Home;

Answer 2

Issue
You are rendering your homepage header no matter what, regardless of path/page.
Solution
Just render the header content into its own route within the Switch, and move the routes into App. By placing the less specific home path ("/") last/later then more specific paths will be attempted to be matched first, and if no prior path is matched then the header will render.
function App() {
return (
<Router>
<Switch>
<Route path="/User" component={User} />
<Route path="/Adcontent" component={AdContent} />
<Route path="/">
<header>
<div>ShareAdsLink</div>
<nav>
<Link to="/User">
<li className="button">LogIn</li>
</Link>
<Link to="/AdContent">
<li className="button">SignUp</li>
</Link>
</nav>
</header>
</Route>
</Switch>
</Router>
);
}