Question

我正在尝试使用反应路由器身份验证重定向，如此处所示（https://reacttraining.com/react-router/web/example/auth-workflow）。我当前收到错误，无法接收未定义的属性“状态”。

该错误出现在我的登录组件中，该组件当前在React Router中通过Route path="/login" render={() => Login } exact调用。但是，当我将其更改为Route path="/login" component={Login} exact时，它将呈现并且不会出现错误。我确实需要使用render函数，因为我需要它进行回调。关于它为何如此行事的任何想法。

function Protected() {
  return <h3>Protected</h3>;
}
function AuthExample() {
  return (
<React.Fragment>
  <Router>
    <Switch>
      <Route path="/login" component={Login} exact />
      <PrivateRoute path="/" render={() => <Protected />} exact />
    </Switch>
  </Router>
</React.Fragment>
  );
}

class Login extends Component {
  constructor(props) {
super(props);
this.state = {
  redirectToReferrer: false,
};
}

handleSubmit(event) {
fakeAuth.authenticate(() => {
  this.setState({ redirectToReferrer: true });
});
}

render() {
const { from } = this.props.location.state || { from: { pathname: "/" } };
const { redirectToReferrer } = this.state;
if (redirectToReferrer === true) {
  this.props.history.push(from.pathname);
}
return (
  <button
    type="submit"
    onClick={this.handleSubmit}
    className="btn btn-primary"
  >
    Login
  </button>
);
}
}

我还直接从上面提供的链接中获取了fakeAuth和PrivateRoute。这是codeandbox的链接：https://codesandbox.io/s/dawn-cherry-3yv8e?fontsize=14。另外，当我单击登录时，作为一种辅助任务，它也不会将我重定向到受保护的页面。感谢您的帮助。

Answer 1

您忘了使用withRouter

包装组件

export default withRouter(Login);

注意： 在您的帖子中写下这个

Route path="/login" render={() => Login } exact

这是错误的（除非是错字），应该是

<Route path="/login" render={() => <Login /> } exact />

Answer 2

未定义的内容很可能是“ this.props.location”。您还记得将组件包装在“ withRouter”中吗？如果没有，您将无权访问。

React Router渲染与组件给我错误

2 个答案: