Reactjs 这是一个关于设置路由路由的问题 从“React”导入React； 从“react Router dom”导入{Link，Route，BrowserRouter as Router，Switch}； 导入“/App.css”； 从“./Component/User”导入用户； 从“./Component/AdContent”导入AdContent； //Home.js 函数Home（）{ 返回( 共享ADSLINK 登录 注册 ); }导出默认主页； //App.js 从“React”导入React； 从“./主页”导入主页； 从“react Router dom”导入{Route，BrowserRouter作为路由器，Switch}； 函数App（）{ 返回( ); } 导出默认应用程序；

我想做的是在

主页

中显示默认屏幕（输入后立即看到的页面）。 主页中有登录和注册按钮，如果我单击此按钮，将显示一个新页面。但是在我的结果中，应该打开一个新页面，与

Home

的内容分开，但是

Home

的内容也会显示出来。 如何显示新页面？使用精确的关键字是没有用的

这是我的第一个问题。

---

其次，你能告诉我在哪里（例如，App.js，，）配置基本屏幕吗？

像这样重构你的应用程序应该会有帮助：

        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;

//App.js
从“React”导入React；
从“/Home”导入主页；
从“react Router dom”导入{Route，BrowserRouter作为路由器，Switch}；
从“/Component/User”导入用户；
从“/Component/AdContent”导入AdContent；
函数App（）{
返回(
);
}
导出默认应用程序；
//Home.jsx
从“React”导入React；
从“react router dom”导入{Link}；
函数Home（）{
返回(
共享ADSLINK
登录
注册
);
}
导出默认主页；

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

解决方案 只需在

开关

中将标题内容呈现到它自己的路由中，然后将路由移动到

应用程序

。通过最后/稍后放置不太特定的主路径（

“/”

），将首先尝试匹配更特定的路径，如果没有匹配之前的路径，则将呈现标题

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

函数应用程序（）{
返回(
共享ADSLINK
登录
注册
);
}

Hi@bover我建议您使用这样的路由。谢谢！它运行正常。如果你没事，你能告诉我我的代码有什么问题吗？你看，你有两个s；一个在应用程序组件中，另一个在主页组件中。应用程序组件中的路径总是完全匹配！这反过来会呈现具有自己的路由器和路由的主组件！如果它帮助您解决了问题，请将其标记为已接受，以便其他人也知道。：）非常感谢。很高兴知道有好建议的另一种方法。祝你今天愉快：）@bovet很乐意帮忙。如果您的问题已经解决，请将答案标记为已接受，以便其他人现在可以解决。如果不是，请告诉我们还有什么问题。干杯

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