React-条件渲染：渲染页面或重定向到其他路由

由 Clare发布于 2020-05-18 08:31:57

我创建了一个登录表单和一个受保护的路由。我想跳过渲染登录表单并重定向到另一个页面。我怎样才能做到这一点？

render() {
    if (isAuthenticated()) {      
      // TODO how redirect to another page??
    } else {
      return (
        <Container>
          ...
        </Container>
      );
    }

  }

求骚扰

2020-05-18 08:31:57

您可以通过将要返回的页面返回页面来进行重定向。

class AnotherPage extends Component{
 ...
}

render() {
    if (isAuthenticated()) {      
      return <AnotherPage {...props} />
    } else {
      return (
        <Container>
          ...
        </Container>
      );
    }
}

或者，如果您使用的是路由，则可以按如下所示进行重定向：

<Route 
    {...props} 
    render={props => (
    this.isAuthenticated() ?
       <Component {...props} /> :
       <Redirect to='/anotherpage' />
    )} 
/>

深夜、徘徊

2020-05-18 08:31:57

假设您正在使用react-router-dom，则可以创建PublicRoute组件和PrivateRoute组件。如果用户通过身份验证，请将其发送到PrivateRoute。

您的代码可能看起来像这样：

import { Route } from 'react-router-dom'

const PrivateRoute = ({ component: Component, ...rest }) => {

   return (
      <Route
         {...rest}
         render={props =>
            isAuthenticated ? (
                <Component {...props} />
            ) : (
                <Redirect to="/login" />
            )
         }
      />
   )
}

export default PrivateRoute

Here's a more detailed example: react-router: auth routes

Clare

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3221
注册排名
2680