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

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

我的原始代码仍然被"注释"掉了，或者我想。。。它仍在执行注释掉的行。一旦移除，它就如预期的那样工作。。。骨头动了，对不起。

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