Question

我正在尝试创建类似this demonstration的私有路由包装器

当然不行。

以下是我如何称呼路线：

<Router>
  <Switch>
    <Route... <Other basic Routes>
    <PrivateRoute authed={this.state.authed} path="/account" user={currentUser} handler={this.handler} component={Account} />
  </Switch>
</Router>

这是PrivateRoute功能：

function PrivateRoute({ component: Component, authed, ...rest }) {
  return (
    <Route
      {...rest}
      render={props => authed === true
        ? <Component {...props} />
        : <Redirect to={{ pathname: '/login', state: { from: props.location }}
      } />}
    />
  )
}

如果我从PrivateRoute函数调试console.log组件，authed或rest，它们看起来很好。只是道具总是为空而且不会传递到我的组件中。我很茫然。

我从react和react-router-dom导入：

import React, { Component } from 'react';
import { Router, Route, Switch, Redirect } from 'react-router-dom';

我正在使用这些版本的依赖项进行反应。

"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "4.2.2"

此外，如果我只是将代码移出PrivateRoute函数并将其内联到路由上，它就可以正常工作。只有当我制作一个通用的Route包装器时，我才开始遇到问题。有什么想法吗？

React PrivateRoute不传播休息/道具？

0 个答案: