Reactjs 如何使用react路由器有条件地重定向？

我正在尝试从登录屏幕重定向到主屏幕。如何在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;

从“React”导入React；
导入{路由器，
路线,，
链接
重新使用
}从“反应路由器dom”；
从“../history”导入历史记录；
从“/LoginView”导入LoginView；
从“./SearchPanel”导入SearchPanel；
导入“/style.css”；
类应用程序扩展了React.Component{
状态={token:''，groupId:''，主机名：''，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（）{
返回(
！this.state.loggedIn(
历史记录。替换（“/login”）
) : (
历史记录。替换（“/home”）
)
}
/>
}
/>
(
)}
/>
)
}
}
导出默认应用程序；

我希望被重定向到/home，但它保持打开状态/login

有一个历史对象，请使用该对象

this.props.history.replace（“/home”）

使用

.replace（）

可确保用户无法导航回登录。否则请使用

.push（）

我今天需要这样做。 这是我的代码，请记住，我决定将其设置为一个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}
            </>
        )
    }
};

从“React”导入React；
从“react router”导入{Redirect}；
接口IConditionalProps{
shouldRedirect:boolean，
致：字符串
}
导出常量条件重定向：React.FC=（props）=>{
const{shouldRedirect，to，children}=props；
如果（应该重定向）{
log（“重定向”）；
返回
}否则{
返回(
{儿童}
)
}
};

用法：

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

查看此答案我向路由器传递了一个历史道具，并在这两种情况下使用了.push和/或.replace。仍然是相同的结果检查它是否有效，这是您的代码。手动更改

loggedIn

状态，并从地址栏转到

“/”

，然后刷新。这确实有效，但在状态更改时不会自动重定向用户。您在哪里更改状态？每个

setState

重新渲染都会工作。我修复了它！更改状态后，我必须将其重定向到“/”。否则，它将始终跳过第一个路由中的render（），并停留在“/login”上