Question

我试图在react-router v4中解决重定向问题。如果用户已登录，我想重定向到Dashboard组件;如果我到了路径=＆＃34; /＆＃34;

，我想要在用户注销时注册组件

 <Switch>
   <Route exact path="/" component={Login} />    
   <PrivateRoute path="/dashboard" component={Dashboard}></PrivateRoute>
   <Redirect from='*' to='/404' />
 </Switch>

提前致谢。

Answer 1

如果我理解正确的话是：

经过身份验证的用户访问登录页面=＆gt;重定向到信息中心
未经身份验证的用户访问信息中心=＆gt;重定向到登录页面
未经身份验证的用户访问（或重定向到）404 =＆gt;重定向到登录页面
未经身份验证的用户已退出=＆gt;重定向到登录页面

对于1，如果用户已通过身份验证，请检查componentDidMount login，如果是，则重定向到信息中心。

对于componentDidMount中的2和3，这次如果用户未经过身份验证，则会重定向到登录。

对于4，在logout重定向到用户login页面内。

我不知道您如何存储身份验证数据，因此我无法提供准确的示例代码。

Answer 2

authenticate() {
    //do something to check if logged in
    if (loggedIn) {
         this.setState({ isAuth: true })
    }
}    

<Router>
    <Switch>
            <Route path="/" render={props => ( 
                <Login 
                auth={this.authenticate} 
                /> 
            )}/>
            {this.state.isAuth ?
                <Route path="/dashboard" component={Dashboard}/>
                />
            ) : <Redirect to='/' />}
    </Switch>
</Router>

然后在您的登录组件中执行以下操作：

<Link to="/dashboard"><button onClick={() => this.props.auth()}>Sign In</button></Link>

Answer 3

您可以检查用户是否已登录PrivateRoute并根据此值重定向到“/ login”页面或从props返回Component

PrivateRoute组件的示例：

const mapStateToProps = createStructuredSelector({
    isLoggedIn: makeSelectIsLoggedIn(),
});

@connect(mapStateToProps)
export default class PrivateRoute extends React.Component {
    render() {
        const {isLoggedIn} = this.props;

        return isLoggedIn
            ? <AppLayout {...this.props}/>
            : <Redirect to={routePaths.LOGIN}/>;
    }
}

PublicRoute组件：

const mapStateToProps = createStructuredSelector({
    isLoggedIn: makeSelectIsLoggedIn(),
});

@connect(mapStateToProps)
export default class PublicRoute extends React.Component {
    render() {
        const {isLoggedIn} = this.props;

        return isLoggedIn
            ? <Redirect to={routePaths.DASHBOARD}/>
            : <AppLayout {...this.props}/>;
    }
}

路线：

<Switch>
    <Route exact path={routePaths.ROOT} component={Login} />
    <PublicRoute path={routePaths.LOGIN} component={Login}/>
    <PrivateRoute path={routePaths.DASHBOARD} component={Dashboard}/>
    <Route component={NotFound}/>
</Switch>

根据登录状态重定向到不同的组件

3 个答案: