为什么使用 'render' prop 'component'而不是 prop 会导致我在 React Router 渲染的组件中的内容消失？

Question

我正在用React制作一个应用程序，以便将道具传递给React Router正在渲染的组件。然而，我意识到，当我在路由器中使用"render"道具而不是"component"道具时，组件中的原始内容不会出现。在这种情况下，当我导航到localhost:3000/home时，文本"这是主页"不可见。

import React from 'react';
import { makeStyles} from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
today: {
margin: '0 auto',

}
}));
export default function HomePage(props) {
const classes = useStyles();
return (
<div className={classes.today}>
this is home page
</div>
)
}

class App extends Component {

constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
tasks: ['Walk the dog', 'Hit the gym', 'Finish assignment']
}
}

render() {
const { classes } = this.props;

return (
<div className={classes.root}>
<AddTodoForm />
<Router>
<Header isLoggedIn={this.state.isLoggedIn}/>
<Switch>
<Route path="/" exact component={LandingPage}></Route>
<Route path="/login" component={LoginPage}></Route>
<Route path="/signup" component={SignupPage}></Route>
<Route path="/home" render={(props) => (<HomePage tasks={this.state.tasks} />)}> </Route>
</Switch>
</Router>
</div>
);
}

}
export default withStyles(useStyles)(App);

Answer 1

您必须有权访问它们并将renderProps传递给component props

<Route path="/home" render={(renderProps) => (<HomePage tasks={this.state.tasks} renderProps={renderProps} />)}>

看看这里：

https://ui.dev/react-router-v4-pass-props-to-components/