[英]Pass Props in a Private Route React
I'm trying to pass several props in a private route.我正在尝试在私人路线中传递几个道具。 What's the correct way to write this and what am I missing?
写这个的正确方法是什么,我错过了什么? Here is the code I have.
这是我的代码。 My app works with this code, in that the user is able to login and see the dashboard.
我的应用程序使用此代码,因为用户能够登录并查看仪表板。 However, the props aren't passing.
但是,道具并没有通过。 Is there a way to pass props to a private route?
有没有办法将道具传递到私人路线?
<PrivateRoute exact path="/dashboard" component={Dashboard} render={routeProps =>
<Dashboard
handleUpdate={this.handleUpdate}
book={this.state.book}
info={this.state.info}
{...routeProps} />}
/>
Dashboard Component仪表板组件
class Dashboard extends Component {
state = {
book: this.props.book,
info: this.props.info,
error: '',
}
onLogoutClick = e => {
e.preventDefault();
this.props.logoutUser();
};
render() {
console.log(`BOOK STATE IN DB: ${this.state.book}`)
const { user } = this.props.auth;
return(
<div>
<h4>
<b>This is your page</b> {user.name}
</h4>
<button onClick={this.onLogoutClick}>Logout</button>
<h2>Search Book</h2>
<Search
handleUpdate={this.props.handleUpdate}
/>
<h4>Book Results</h4>
<div>{this.state.book}</div>
</div>
);
}
}
Dashboard.propTypes = {
logoutUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(
mapStateToProps,
{ logoutUser }
)(Dashboard);
Private Route私人路线
import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
const PrivateRoute = ({ component: Component, auth, ...rest }) => (
console.log(auth),
<Route
{...rest}
render={props =>
auth.isAuthenticated === false ? (
<Redirect to="/login" />
) : (
<Component {...props} />
)
}
/>
);
PrivateRoute.propTypes = {
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);
Can you try removing the component={Dashboard}
prop, and only use the render prop to render the Dashboard.您可以尝试删除
component={Dashboard}
道具,并仅使用 render 道具来渲染仪表板。 Your code should look like this您的代码应如下所示
<PrivateRoute exact path="/dashboard" render={routeProps =>
<Dashboard
handleUpdate={this.handleUpdate}
book={this.state.book}
info={this.state.info}
{...routeProps} />}
/>
Can you show us the code of PrivateRouter component?你能告诉我们 PrivateRouter 组件的代码吗? You can just follow the such way
你可以按照这样的方式
<PrivateRoute exact path="/dashboard" component={Dashboard} props = {{book: this.state.book etc}}/>
And receive this props on PrivateRoute components to put it into child component并在 PrivateRoute 组件上接收此道具以将其放入子组件
Warning :
<Route component>
takes precedence over<Route render>
so don't use both in the same.警告:
<Route component>
优先于<Route render>
所以不要同时使用两者。
So, remove the component={Dashboard}
所以,删除
component={Dashboard}
After the comments and the PrivateRoute
code, i suggest you rewrite your PrivateRoute
to在评论和
PrivateRoute
代码之后,我建议您将PrivateRoute
重写为
const PrivateRoute = ({ auth, ...rest }) => {
if (!auth.isAuthenticated) {
return <Redirect to="/login" />;
}
return <Route {...rest} />
);
and remove the component={Dashboard}
part.并删除
component={Dashboard}
部分。
const PrivateRoute = ({component: Component, auth, book, handleUpdate, ...rest }) => (
console.log(rest),
console.log(book),
<Route
{...rest}
render={props =>
auth.isAuthenticated === false ? (
<Redirect to="/login" />
) : (
<Component book={book} handleUpdate={handleUpdate} {...props} />
)
} /> ) } />)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.