history.push() 更新浏览器中的 URL，但不呈现适当的组件（重定向也不起作用）

Question

我在我的项目中使用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));

下面是我的 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')
);

请注意，我删除了一些与此问题的上下文无关的不必要的功能和导入。

现在让我们来看看我到目前为止所做的尝试：

1. 使用 Router 而不是 BrowserRouter 并将历史对象传递给它。
2. 尝试删除 switch，但也没有用。

我还搜索了解决此问题的其他问题，但不幸的是，没有一个对我有用。

请帮我看看我的代码是否有问题。

谢谢！！

编辑：

看来我今天过得很糟糕，即使 Redirect 对我也不起作用！ 我非常努力，但我不明白为什么即使更改 URL 也没有呈现登录组件。

Answer 1

您需要在您的路线中使用exact 道具。否则，/login 也将首先匹配 /

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

Answer 2

您的Route 组件中似乎没有使用exact。如果你不使用exact，那么 react 将首先路由到/ 路径。它将读取路径（/login）为/ + login。 如果您向此 / 路径提供 exact，则 react 将路由到与该路径完全匹配的指定组件。不必为所有 Route 组件提供exact。

在以下情况下是必要的：

例如，

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

然后您需要提供确切的父路径。

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

简而言之，如果您的下一个 Route 组件路径是上一个路径的子路径，那么您需要将 exact 属性提供给父路径。

---

编辑：还有一件事我想说的是，在您的 / path 的 Route 组件中，您必须有一个渲染道具而不是组件道具来渲染这样的回调组件。

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

@Sohaib 回答的一些功劳。我在他的回答中添加了更多解释。