我有下面的代码,并且一切正常。
现在,我想添加一个新组件,该组件将呈现不同的导航栏并具有不同的路由。
如何在初始加载时有条件地渲染不同的组件?
选项: 将当前的App.js代码分成两个不同的组件,每个组件将具有自己的导航栏和路由。
此选项是最理想的选择,但是我想先仅渲染一个组件,如果用户访问网站的其他部分,请加载另一个组件。
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navigation from '../Navbar/Navbar';
import Home from '../../Pages/Home/Home';
import Services from '../../Pages/Services/Services';
import Bicultural from '../../Pages/Bicultural/Bicultural';
import Training from '../../Pages/Training/Training';
import Talent from '../../Pages/Talent/Talent';
import Mission from '../../Pages/Mission/Mission';
import Team from '../../Pages/Team/Team';
import About from '../../Pages/About/About';
import Blog from '../../Pages/Blog/Blog';
import Careers from '../../Pages/Careers/Careers';
import Contact from '../../Pages/Contact/Contact';
import NoMatch from '../../Pages/NoMatch/NoMatch';
import Footer from '../Footer/Footer';
import ScrollToTop from '../ScrollUpButton/ScrollToTop';
function App() {
return (
<div className="App">
<React.Fragment>
<Router>
<Navigation className="no-bg" />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/services" component={Services} />
<Route exact path="/bicultural" component={Bicultural} />
<Route exact path="/training" component={Training} />
<Route exact path="/talent" component={Talent} />
<Route exact path="/mission" component={Mission} />
<Route exact path="/team" component={Team} />
<Route exact path="/about" component={About} />
<Route exact path="/blog" component={Blog} />
<Route exact path="/careers" component={Careers} />
<Route exact path="/contact" component={Contact} />
<Route component={NoMatch} />
</Switch>
</Router>
<Footer />
<ScrollToTop />
</React.Fragment>
</div>
);
}
export default App;
答案 0 :(得分:0)
您可以有一个简单的状态变量showNav,并将其setState函数作为道具传递给每个Route。然后,您的组件可以根据是否要在该路线上显示导航来将该prop设置为true或false。
const [showNav, setShowNav] = useState(true);
{showNav && <Navigation className="no-bg"/> }
像这样在您的路线内传递它:-
<Route exact path="/" render ={(props) = >
<Home {...props} setShowNav={setShowNav}/>}
/>
然后在道具内部,就在返回组件之前,您可以执行此操作以不显示导航
props.setShowNav(false);
尽管如此,请确保在每个组件内传递setShowNav函数,并且这些组件调用setShowNav(true),以防您想要显示导航