Reactjs history.push（）更新浏览器中的URL，但不呈现相应的组件（重定向也不起作用）

我在我的项目中使用

react router

，并在

componentDidMount（）中使用
this.props.history.push（）
如果用户未登录，则将其重定向到
Login
组件。
这是我在App.js中的代码：


class App extends React.Component{

    constructor(props){
        super(props);
        
    }   
    
    componentDidMount(){
        
        firebase.auth().onAuthStateChanged((user)=>{
            if(user){
                this.props.dispatch(login(user.email)); 
            }
            else{
                
                this.props.history.push('/login');
            }
        })
    }
        render(){
        //console.log(this.props.isLoggedIn);
        return (<div className="App">
            <Switch>
                <Route path="/" component={()=><Homepage userName={this.props.username} logout={this.logout}/>} />
                <Route path="/login" component={Login} />
            </Switch>
        </div>);}
}


export default withRouter(connect(mapStateToProps)(App));


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}   
componentDidMount（）{
firebase.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
this.props.dispatch（登录（user.email））；
}
否则{
this.props.history.push（'/login'）；
}
})
}
render（）{
//console.log（this.props.isLoggedIn）；
返回(
} />
);}
}
使用路由器导出默认值（connect（mapstatetops）（App））；

下面是我的index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';

const store= createStore(combineReducers({userState: userState}),applyMiddleware(logger));


ReactDOM.render(
    
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
    ,
    document.getElementById('root')
);


从“React”导入React；
从“react dom”导入react dom；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“./index.css”；
const store=createStore（组合减速机（{userState:userState}），applyMiddleware（记录器））；
ReactDOM.render(
,
document.getElementById（'root'））
);

请不要因为我删除了一些不必要的函数和与这个问题无关的导入

现在让我们来谈谈我迄今为止所做的努力：

使用
Router
而不是
BrowserRouter
，并将历史对象传递给它
尝试删除
开关
，但也不起作用
我还搜索了解决这个问题的其他问题，但不幸的是，没有一个对我有用

请帮助我查找我的代码中是否存在任何问题

谢谢

编辑：

看来我今天过得不好，甚至
Redirect
对我也不起作用！
我正在努力尝试，但我不明白为什么即使URL正在更改，登录组件也没有呈现。
您需要在路线中使用
exact
道具。否则，
/login
也将首先匹配
/

            <Route exact path="/" component={()=><Homepage userName={this.props.username} logout={this.logout}/>} />
            <Route exact path="/login" component={Login} />

}/>
您似乎没有在
路由
组件中使用
精确
。如果不使用
exact
，则react将首先路由到
/
路径。它将路径（
/login
）读取为
/
+
登录
。
如果您为此
/
路径提供
exact
，则react将路由到与路径完全匹配的指定组件。无需向所有路由组件提供准确的

在下列情况下有必要：

比如说,

<Route exact path="/" component={About} />
<Route path="/login" component={Login} />

@Sohaib答案的部分学分。我在他的回答中添加了更多的解释。
您没有使用交换机路线的确切路径。开关将首先点击您的
/
路径。尝试将该行与
/login
行交换您使用的是react router还是react router dom？@Varun我正在将react router dom与Browser router一起使用没有任何东西适合我！即使我正在使用Redurect，也无法呈现登录组件。@Jontyagi我已经模拟了您的代码，并使用交换机路由的精确路径运行了它，它正在按预期工作。这是现在显示的链接。props.history中无法读取未定义的属性push。你能将你的全部代码粘贴到CodeSandbox或StackBlitz中吗，这样我们就可以看一看。。。在那种情况下很难帮忙。也许可以尝试使用
window.history.push
instead，我可以为您提供我的全部代码，但它也使用了许多其他文件和工具。几乎不可能重现这个问题。它说渲染不是一个函数，这可能有助于解决这些差异。阅读答案中的案例3和案例4。谢谢大家，给了你们时间，但我想我可能会寻找一些反应路由器的替代品。不管我在做什么，它都不能正常工作。
<Route exact path="/login" component={Login} />
<Route path="/login/profile" component={Profile} />

<Route exact path="/" render={()=><Homepage userName={this.props.username} logout={this.logout}/>} />