时间戳

首页 > 解决方案 > 使用 react-router-dom ()

reactjs - 使用 react-router-dom ()

问题描述

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

应用程序.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????

标签： reactjsreact-routerreact-functional-component

解决方案

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

应用程序.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;

登陆页面.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

推荐阅读