Question

我正在尝试从登录屏幕重定向到主屏幕。如何在ReactJS中正确实现条件重定向？

我试图根据状态重定向到组件。如我所料，this.state.loggedIn返回true或false。

import React from 'react';
import {Router,
    Route,
    Link,
    Redirect
} from "react-router-dom";
import history from '../history';
import LoginView from './LoginView';
import SearchPanel from './SearchPanel';
import "./style.css";


class App extends React.Component {
    state = { token: '', groupId: '', hostName: '', loggedIn: false};

    getLoginData = async (props) => {
        this.setState({loggedIn: true});
        console.log(this.state.loggedIn);
        this.setState({  token: props.token, groupId: props.token.groupId.data, hostName: props.token.hostName} );
    };

    render() {
        return (
            <Router history={history}>
                <div className="background">
                    <Route
                        exact
                        path="/"
                        render={() =>
                            !this.state.loggedIn ? (
                                history.replace("/login")
                            ) : (
                                history.replace("/home")
                            )
                        }
                    />
                    <Route
                        path="/login"
                        component={() => <LoginView onLogin={this.getLoginData} />}
                    />
                    <Route
                        path="/home"
                        component={() => (
                            <SearchPanel
                                token={this.state.token}
                                groupId={this.state.groupId}
                                hostName={this.state.hostName}
                            />
                        )}
                    />
                </div>
            </Router>


        )
    }
}

export default App;

我希望将重定向到/ home，但仍保留在/ login

Answer 1

<Route/>有一个历史记录对象，请使用该对象 this.props.history.replace("/home")

使用.replace()可确保用户无法导航回再次登录。否则，请使用.push()。

Answer 2

我今天需要这样做。这是我的代码，请记住，我决定将其设置为HOC，您可以选择包装还是不包装。对于具有多个重定向案例的用例，您肯定要使用此内联而不是包装。

import React from 'react';
import {Redirect} from 'react-router';

interface IConditionalRedirectProps {
    shouldRedirect: boolean,
    to: string
}

export const ConditionalRedirect: React.FC<IConditionalRedirectProps> = (props) => {
    const {shouldRedirect, to, children} = props;

    if (shouldRedirect) {
        console.log('redirecting');
        return <Redirect to={to}/>
    } else {
        return (
            <>
                {children}
            </>
        )
    }
};

用法：

<ConditionalRedirect shouldRedirect={someFunctionThatReturnsBool()}
                             to={'some url'}>
    <Normal Elements here>
</ConditionalRedirect>

如何有条件地使用react-router进行重定向？

2 个答案: