在私有路由 React 中傳遞道具

Question

我正在嘗試在私人路線中傳遞幾個道具。 寫這個的正確方法是什么，我錯過了什么？ 這是我的代碼。 我的應用程序使用此代碼，因為用戶能夠登錄並查看儀表板。 但是，道具並沒有通過。 有沒有辦法將道具傳遞到私人路線？

   <PrivateRoute exact path="/dashboard" component={Dashboard} render={routeProps =>
            <Dashboard
            handleUpdate={this.handleUpdate}
            book={this.state.book}
            info={this.state.info}
            {...routeProps} />}
          />

儀表板組件

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);

私人路線

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);         

Answer 1

您可以嘗試刪除component={Dashboard}道具，並僅使用 render 道具來渲染儀表板。 您的代碼應如下所示

  <PrivateRoute exact path="/dashboard" render={routeProps =>
            <Dashboard
            handleUpdate={this.handleUpdate}
            book={this.state.book}
            info={this.state.info}
            {...routeProps} />}
          />

Answer 2

你能告訴我們 PrivateRouter 組件的代碼嗎？ 你可以按照這樣的方式

<PrivateRoute exact path="/dashboard" component={Dashboard} props = {{book: this.state.book etc}}/>

並在 PrivateRoute 組件上接收此道具以將其放入子組件

Answer 3

從文檔

警告： <Route component>優先於<Route render>所以不要同時使用兩者。

所以，刪除component={Dashboard}

---

在評論和PrivateRoute代碼之后，我建議您將PrivateRoute重寫為

const PrivateRoute = ({ auth, ...rest }) => {
  if (!auth.isAuthenticated) {
    return <Redirect to="/login" />;
  }

  return <Route {...rest} />
);

並刪除component={Dashboard}部分。

Answer 4

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} />
)

} />)