如何在 React 的初始加载时有条件地渲染不同的组件？

Question

我有下面的代码，一切正常。

现在，我想添加一个新组件，它将呈现不同的导航栏并具有不同的路由。

如何在初始加载时有条件地渲染不同的组件？

选项：将当前 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;

Answer 1

您可以有一个名为 showNav 的简单 state 变量，并将其 setState function 作为道具传递到您的每个 Route 中。 然后，您的组件可以将该道具设置为 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 function 并且这些组件调用 setShowNav(true)，以防您想要显示导航