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;
  

Что я пытаюсь сделать, так это показать экран по умолчанию (страницу, которую вы видите при входе) Home .
В нем есть кнопки входа и регистрации Home , и если я нажму эту кнопку, должна появиться новая страница. Но в моих результатах должна быть открыта новая страница, отдельная от содержимого Home , но содержимое Home тоже будет отображаться.
Как я могу отобразить новую страницу? Использование точных ключевых слов бесполезно.

Это мой первый вопрос. Во-вторых, можете ли вы дать мне совет о том, где (например, App.js ,,) для настройки базового экрана?

Подобная реструктуризация вашего приложения должна помочь:

 //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;
  

Проблема

Вы отображаете заголовок своей домашней страницы, несмотря ни на что, независимо от пути / страницы.

Решение

Просто отобразите содержимое заголовка в его собственном маршруте внутри Switch и переместите маршруты App в. Если поместить менее конкретный домашний путь ( "/" ) последним / позже, то сначала будут предприняты попытки сопоставления более конкретных путей, и если предыдущий путь не будет сопоставлен, тогда заголовок будет отображаться.

 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>
  );
}