这是关于设置路由的问题

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;

我想做的是在Home中显示默认屏幕（输入后立即看到的页面）。 Home中有登录和注册按钮，如果我单击此按钮，应该会出现一个新页面。但是在我的结果中，应该打开一个新页面，与Home的内容分开，但是Home的内容也将显示。 如何显示新页面？使用完全相同的关键字是没有用的。

这是我的第一个问题。 其次，您能给我一些建议在哪里（例如App.js，）来配置基本屏幕吗？

Answer 1

像这样重组应用程序应该会有所帮助：

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

问题

无论路径/页面如何，您都将呈现主页标题。

解决方案

只需将标头内容渲染到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>
  );
}