[ReactJS][React-Router-V4] 重定向[auth] 问题答案

【问题标题】：[ReactJS][React-Router-V4] Redirects[auth] problems[ReactJS][React-Router-V4] 重定向[auth] 问题
【发布时间】：2019-01-14 21:25:02
【问题描述】：

我正在建立一个新的 React JS 项目，我想在人们未连接时重定向 authPage 上的人们。

我有一个这样的 App 容器：

class App extends Component {
  render() {
return (
  <div className={'app-wrapper'}>
    <Helmet
      titleTemplate="FFMKR"
      defaultTitle="React.js Boilerplate"
    >
      <meta name="description" content="A React.js Boilerplate application" />
    </Helmet>
    <Header />
    <div className={'container-fluid'}>
      <div className={'row'}>
        <SideBar />
        <main role="main" className={'col-md-9 ml-sm-auto col-lg-10 px-4'}>
          <Switch>
            <Route path="/login" component={Login} />
            <PrivateRoute exact path="/" component={HomePage} />
            <Route path="" component={NotFoundPage} />
          </Switch>
        </main>
      </div>
    </div>
  </div>
);
}
}

我的 PrivateRoute 就是这样：

  const PrivateRoute = (props) => {
  const { component: Component, isLogged, ...rest } = props;
  console.log('on est dans la route lol', isLogged, {...rest});

  return (
    <Route
  {...rest}
  render={propsRender =>
    isLogged ? (
      <Component {...propsRender} />
    ) : (
      <Redirect
        to={{
          pathname: "/login",
          state: { from: propsRender.location }
        }}
      />
    )
  }
/>
);
};


PrivateRoute.propTypes = {
  isLogged: PropTypes.bool,
};

export default PrivateRoute;

我的变量 isLogged 已经是假的。当我启动我的应用程序时，我继续使用 url "/" 并且我在 url"/login" 上重定向但我的登录组件没有显示：

https://image.noelshack.com/fichiers/2019/03/1/1547456719-capture-d-ecran-de-2019-01-14-10-04-38.png

当我在 url "/login" 上重新加载时，我的登录组件工作正常：

https://image.noelshack.com/fichiers/2019/03/1/1547456719-capture-d-ecran-de-2019-01-14-10-04-58.png

为什么我启动我的应用程序，我的登录组件没有出现？

【问题讨论】：

标签： reactjs react-router react-router-v4

【解决方案1】：

问题是你必须返回Redirect 组件而不是渲染它。因此，您必须执行以下示例的操作

export class PrivateRoute extends Component {
  render() {
    const { isLogged } = this.props;

    if (!isLogged()) {
      return <Redirect to="/login" />;
    }

    return (
      <Route
        {...this.props}
        component={props => (
          <this.props.component
            {...props}
          />
        )}
      />
    );
  }
}

【讨论】：

【解决方案2】：

如果地址栏中的 url 更改为 /login，则 react-router 正在按预期工作。您的登录组件可能有问题。尝试将 Login 组件替换为如下所示的简单内容，然后进行测试：

function Login() {
  return <h3>Test login page</h3>;
}

【讨论】：

（抱歉无法评论您的帖子，因为我在这里没有足够的声望点，看来我只能评论我自己的答案）根据您在stackoverflow.com/a/54182431/4979359 发布的内容看来你的 Login 组件有一个 bug，React 状态管理可能有点棘手。您可以发布您的登录组件的代码吗？

【解决方案3】：

哦，对不起，我的屏幕上没有显示这些信息，但是 url 地址栏更改为 /login，我已返回此功能，但我有同样的问题。

这不是第一次，但如果我在 url /login 上重新加载页面，那么我在屏幕上有“测试登录页面”。

我在 isLogged === true 时测试 PrivateRoute 组件，这很有效我不明白为什么我的登录组件没有显示。

【讨论】：