相关疑难解决方法(0)

与Redux连接后,示例https://reacttraining.com/react-router/web/example/auth-workflow中的 PrivateRoute无效.

我的PrivateRoute看起来与原始版本几乎相同,但只连接到Redux并在原始示例中使用它而不是fakeAuth.

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

 PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired,
  component: PropTypes.func.isRequired
 }

 const mapStateToProps = (state, ownProps) => {
  return {
     auth: state.auth
  }
};

export default connect(mapStateToProps)(PrivateRoute);

用法和结果: -

1. 不工作,但希望和期望工作
   • <PrivateRoute path="/member" component={MemberPage} />
2. 工作,但不希望像这样使用
   • <PrivateRoute path="/member" component={MemberPage} auth={auth} />
3. 工作.只是工作,但根本不想使用.从这一点可以理解,如果你将原始的PrivateRoute连接到Redux,你需要传递一些额外的道具(任何道具)来使PrivateRoute工作,否则它不起作用.任何人,请对这种行为给出一些暗示.这是我的主要问题
   • <PrivateRoute path="/member" component={MemberPage} …

PrivateRoute在我的react.js项目中集成HOC时,我完全陷入困境.

这是我的路线文件

import React, { Component } from "react";
import { Route, Redirect, Switch, BrowserRouter as Router } from 'react-router-dom';
import Dashboard from "../view/Dashboard/Dashboard";
import Login from "../view/Login/Login";
import Admin from "../view/UserManagement/Admin";
import cookie from 'react-cookies'

const PrivateRoute = ({ component, ...rest }) => {
  const isAuthed = cookie.load('token')
  console.log(isAuthed, 'dddddddddddddddddddd')
  return (
    <Route {...rest} exact
      render = {(props) => (
        isAuthed ? (
          <div>
            {React.createElement(component, props)}
          </div>
        ) :
        (
          <Redirect
            to={{
              pathname: '/login',
              state: { …

我正在将React Router v4与redux一起使用，并且如果用户未登录，我想利用私有和受保护的路由进行重定向。

我有这个路线组件：

class Routes extends Component {

render() {
    const { auth } = this.props;
    // so checks against isAuthenticated can pass
    if (auth.isAuthenticated !== undefined) {
        return (
            <div>
                <Route exact component={() => <Home />} />
                <PublicRoute
                    authed={() => auth.isAuthenticated}
                    path="/login"
                    component={(routerProps) => <Login {...routerProps} />}
                />
                <PublicRoute
                    authed={() => auth.isAuthenticated}
                    path="/register"
                    component={(routerProps) => <Register {...routerProps} />}
                />
                <PrivateRoute
                    authed={() => auth.isAuthenticated}
                    path="/dashboard"
                    component={Dashboard}
                />
            </div>
        );
    } else {
        return <div></div>
    }
  }
}

function mapStateToProps(state) …