javascript - 在 React Router 中将参数传递给 Route

Question

我定义了一个只有用户登录才能访问的路由。代码如下:

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

我将 userLoggedIn 作为参数传递，因为应用程序保持其状态。我以与 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)。

<小时/>

我创建了一个更简单的示例，正​​在应用程序中进行测试。我添加了以下行:

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

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

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

我现在看到的是控制台中出现 null 两次，然后是 userLoggedIn 的实际值...我猜组件第一次接收 null 重定向到 /no，因此当实际值“到达”时，它不会像应该的那样转到 /yes...

<小时/>

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

谢谢

Answer 1

好吧，在尝试了几个选项之后，我发现了一些适合我的东西，它比我想要做的更简单。

在具有路由器的应用程序部分中，我创建了一个使用条件编码的Route:

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

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

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