Question

我已定义了一条路由，除非用户已登录，否则无法访问该路由。此代码如下：

    const App = ({ userLoggedIn }) => {
return (
        <Router>
          <div className="App">
            <Header userLoggedIn={ userLoggedIn }/>
            <ProtectedRoute path='/content' component={ Day } userLoggedIn={ userLoggedIn } />
            <Footer />
          </div>
        </Router>
      );
    }

我将userLoggedIn作为参数传递，因为App正在保持其状态。我以与React Router文档中的Auth示例类似的方式定义ProtectedRoute。

const ProtectedRoute = ({ userLoggedIn, component, ...rest }) => (
  <Route {...rest} render={ props => (
    userLoggedIn ? (
      React.createElement(component, props)
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

但userLoggedIn始终为null（即使在调用ProtectedRoute之前该值不为null）。

我创建了一个更简单的例子，我在App中进行了测试。我添加了以下行：

<TestRoute path='/test' userLoggedIn={ userLoggedIn }/>

并创建了TestRoute组件，如下所示：

    const TestRoute = ({ userLoggedIn }) => {
  console.log(userLoggedIn);
  return (
    <Redirect to={{
      pathname: userLoggedIn ? '/yes' : '/no'
    }}/>
  )
}

我现在看到的是在控制台中显示null两次，然后是userLoggedIn的实际值......我想组件第一次收到null重定向到{ {1}}所以，当真正的价值到来时，＃34;它没有按照它应该去/no ......

如何访问我传递的userLoggedIn参数？有没有人有类似的例子？

由于

Answer 1

好的，在尝试了几个选项后，我发现了一些对我有用的东西，它比我想做的更简单。

在我有Router的应用部分中，我创建了一个使用条件编码的Route：

<Route path='/content' component={ userLoggedIn ? Day : LoginPage } />

这就是我所需要的。如果用户已登录，则会呈现Day组件，如果未登录，则会重定向到LoginPage。也许它不是最好的解决方案，但它对我有用。

如果有人有更好的解决方案，请告诉我。

Answer 2

您可以通过props.route访问路由器属性，即props.route.userLoggedIn。

如果您的组件不是顶级组件，则可以将其包装在withRouter中，或通过v4中的context访问它，但看起来您不需要。< / p>

Answer 3

要在用户访问该页面之前将导航检查为userLoggedIn，我使用onEnter方法。

<Route path='/content' onEnter={userLoggedIn} component={Day} />

所以你的userLoggedIn就像这样

function userLoggedIn(nextState, replace) {
  // check if your user is logged in
  if (localStorage.getItem('isLogged') !== 'true') {
    // block navigation and redirect to login page
    replace({ pathname: '/login', state: { nextPathname: nextState.location.pathname } });
    return true;
  }
  return false;
}

希望这有帮助

将参数传递给React Router中的Route

3 个答案: