这是一个关于设置路由的问题

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的内容。如何显示新页面？使用精确的关键字是没有用的。

这是我的第一个问题。第二，你能给我在哪里(ex，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>
);
}