Передача переменных из -> функциональным компонентам в React с использованиемact-router-dom (<Route>)

Question

Я не могу заставить свои функциональные компоненты передавать переменную, как я ожидал. Я пробовал передавать реквизиты, не работал, я также не уверен, что синтаксис одинаков с функциональными компонентами кошелька. Любые советы?

приложение. js:

const [showRecommender, setRecommenderVisible] = React.useState(true);

 <Switch>
        <Route
          path='/'
          render={() => <LandingPage showRecommender={showRecommender} />}
          //ALSO TRIED: render={(props) => <LandingPage {...props} showRecommender={showRecommender} />}
        />
    </Switch>

LandingPage. js:

const LandingPage = ({showRecommender}) => {
console.log("showRecommender val from landingPage:", showRecommender);  //getting undefined????

Answer 1

Мой исходный код все еще «закомментирован», или я подумал ... он все еще выполняет закомментированную строку. После удаления все заработало, как и ожидалось ... движение головы, извините, все.

<Switch>
            // <Route path="/" exact component={LandingPage}/>
            <Route
              path='/'
              render={() => <LandingPage showRecommenderVal={showRecommender} />}
            />
          </Switch>

Answer 2

Работает нормально. Можете ли вы сопоставить ваш код с кодом ниже и сообщите мне, если ваша проблема решена.

Приложение. js

import React from "react";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
import LandingPage from "./components/LandingPage";

function App() {
  const [showRecommender, setRecommenderVisible] = React.useState(true);

  return (
    <Router>
      <Switch>
        <Route
          path="/"
          render={() => <LandingPage showRecommender={showRecommender} />}
        />
      </Switch>
    </Router>
  );
}

export default App;

LandingPage. js

import React from "react";

const LandingPage = ({ showRecommender }) => {
  console.log("showRecommender val from landingPage:", showRecommender);
  return <div>landing page</div>;
};

export default LandingPage;

Консоль браузера

showRecommender val from landingPage: true            LandingPage.js:4