使用 react-router-dom (<Route>) 将变量从 -> 传递到 React 中的功能组件

Question

我似乎无法让我的功能组件像我期望的那样传递变量。我试过传递道具，没有用，我也不确定语法是否与钱包功能组件相同。有什么建议吗？

app.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

它工作正常。您能否将您的代码与下面的代码匹配，如果您的问题已解决，请告诉我。

App.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

Answer 2

我的原始代码 'commented' 仍然存在，或者我认为......它仍在执行注释掉的行。删除后，它按预期工作......愚蠢的举动，抱歉。

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

使用 react-router-dom (<Route>) 将变量从 -> 传递到 React 中的功能组件

Passing vars from -> to functional components in React using react-router-dom (<Route>)

reactjs

react-router

react-functional-component