Question

我在项目中使用react-router，并且在this.props.history.push()内使用componentDidMount()，如果用户没有被盗，则将其重定向到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')
);

请不要因为我删除了一些不必要的功能并将irrelevent导入到此问题的上下文中。

现在让我们来看看到目前为止我尝试过的事情：

使用Router代替BrowserRouter，并将历史对象传递给它。
尝试删除switch，但这也没有效果。

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

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

谢谢！

编辑：

看起来好像我过得很糟糕，甚至Redirect都不适合我！我正在尽力而为，但是我不明白为什么即使更改URL也不显示Login组件。

Answer 1

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

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

Answer 2

似乎您没有在exact组件中使用Route。如果您不使用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组件中，必须有一个渲染道具，而不是像这样渲染Callback组件的组件道具。

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

@ Sohaib答案有一些学分。我在他的回答中添加了更多解释。

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

2 个答案: