时间戳

首页 > 解决方案 > 通过 id 反应私有路由

javascript - 通过 id 反应私有路由

问题描述

所以我PrivateRoute在 React 中使用来服务一些组件。在我指定如下的确切路径之前，一切都运行良好：

<PrivateRoute exact path="/info/:id" render={(props) => <BookInfo {...props} />} />

如果我正常使用上述路径，则可以正常使用Route，但路由虽然PrivateRoute给了我以下错误。 在此处输入图像描述

PrivateRoute.js

import React from 'react'
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

const PrivateRoute = ({ component: Component, auth, ...rest}) => (
    <Route {...rest} render={ props => 
        auth.isAuthenticated === true ?
        (<Component {...props}/>) : (<Redirect to ='/login'/>)}/>
)

const mapStateToProps = state => ({
    auth: state.auth
})

export default connect (mapStateToProps)(PrivateRoute);

我不知道是什么原因造成的，非常感谢一些帮助。

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

问题

您的PrivateRoute组件期望component传递一个道具，它不处理Route组件处理的其他道具。

const PrivateRoute = ({
  component: Component, // <-- only handles component prop
  auth, ...rest
}) => (
  <Route {...rest} render={ props => 
    auth.isAuthenticated === true ?
    (<Component {...props}/>) : (<Redirect to ='/login'/>)}/>
)

解决方案

BookInfo将您的道具传递给component道具，使其通过管道。

<PrivateRoute exact path="/info/:id" component={BookInfo} />

重构您的PrivateRoute组件以呈现Route带有传递给它的所有道具的 a 或Redirect组件。

const PrivateRoute = ({ auth, ...props }) => auth.isAuthenticated ? (
    <Route {...props} />
  ) : (
    <Redirect to ='/login'/>
  );

推荐阅读