Как мне условно перенаправить с реагировать на роутер?

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().