如何使用 flash 消息 react-router 4 重定向

Question

这是我想要实现的目标：当用户试图访问我的 ReactJS 站点上的受保护页面时，我想将他们重定向到主页，并显示一条闪现消息 "Please log in" 或类似的内容.我如何使用 react-router v4 实现此目的？这是我目前所拥有的：

<Router>
<div>
  <Switch>
    <Route path="/" component={Home} />
    <Route 
      exact path="/source" render={() => (
        isAuthenticated() ? (
          <Source />
        ) : (
          <Home /> //I want to Redirect to the Home Page with a flash message if user is not logged in
        )
      )} 
    />
    <Route path="/contact" component={ContactUs} />
  </Switch>
</div>
</Router>,
);

Answer 1

如何将登录的属性发送到 <Home> 组件，然后主组件可以查看该属性并在需要时呈现闪现消息：

  exact path="/source" render={() => (
    isAuthenticated() ? (
      <Source />
    ) : (
      <Home loggedIn={isAuthenticated} /> 
    )
  )}

Answer 2

以下是对我有用的方法：我使用了 react-router v4 附带的 Redirect 方法。它使您可以轻松实现这一目标。

<Route 
      exact path="/source" render={() => (
        isAuthenticated() ? (
          <Source />
        ) : (
          <Redirect 
            to={{
              pathname: '/',
              state: 'Please sign in' 
            }} 
          />
        )
      )} 
    />

您可以在此处阅读有关重定向的更多信息：React Router v4 - Redirect

如何使用 flash 消息 react-router 4 重定向

How to redirect with flash message react-router 4

flash-message

reactjs

react-router

react-router-v4