Javascript 将参数传递到React路由器中的路由

我已经定义了一个除非用户登录才能访问的路由。其代码如下：

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

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

我现在看到的是，控制台中出现了两次

null

，然后是

userLoggedIn

的实际值。。。我猜组件第一次收到

null

时会重定向到

/no

，因此当实际值“到达”时，它不会像应该的那样转到

/yes

---

如何访问正在传递的userLoggedIn参数？有人有类似的例子吗

---

谢谢

好的，在尝试了几个选项之后，我找到了适合我的东西，它比我想做的更简单

在我拥有

路由器的应用程序部分

中，我创建了一条使用条件编码的

路由

：

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

这就是我所需要的。如果用户已登录，则会呈现

Day

组件，如果未登录，则会重定向到

LoginPage

。也许这不是最好的解决办法，但对我来说很有效

---

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

好的，在尝试了几个选项后，我发现了一些适合我的方法，它甚至比我想做的更简单

在我拥有

路由器的应用程序部分

中，我创建了一条使用条件编码的

路由

：

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

这就是我所需要的。如果用户已登录，则会呈现

Day

组件，如果未登录，则会重定向到

LoginPage

。也许这不是最好的解决办法，但对我来说很有效

---

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

您可以通过

props.route

访问路由器属性，即

props.route.userLoggedIn

---

如果您的组件不是顶级组件，您可以使用路由器将其封装在

中，或者通过v4中的
上下文访问它，但看起来您不需要。
您可以通过
props.route
访问路由器属性，即
props.route.userLoggedIn

如果您的组件不是顶级组件，您可以使用Router将其包装在
中，或者通过v4中的
上下文访问它，但看起来您不需要这样做。
对于导航检查，在用户访问页面之前，我使用
oneter
方法

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

希望这有助于导航检查，因为您的
userLoggedIn
在用户可以访问页面之前，我使用了
onEnter
方法

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

希望这对您的
ProtectedRoute
之外的
有所帮助
尝试控制台
this.props.userLoggedIn
以查看您是否收到了它。如果您的意思是在使用ProtectedRoute之前，我可以确认我收到了它，因为我在另一个组件标题中使用了它（我取出它以简化问题）。标题显示应用程序导航栏中userLoggedIn的值。我将在以后访问我的笔记本电脑时更新此问题。在您的
ProtectedRoute
之外，请尝试控制台
this.props.userLoggedIn
以查看您是否收到了它。如果您的意思是在使用ProtectedRoute之前，我可以确认我收到了它，因为我在另一个组件标题中使用了它（我取出它以简化问题）。标题显示应用程序导航栏中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;
}