React路由器V4中重定向验证的用户

Question

i使用React JS和Firebase创建一个简单的登录应用程序

当我注册时，它将在firebase中创建一个用户，我需要将验证用户骑行到另一页我的index.js文件如下

import React from 'react';
import ReactDOM from 'react-dom';
import { firebaseApp } from './firebase'
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import App from './components/App';
import Signin from './components/Signin';
import Signup from './components/Signup';
firebaseApp.auth().onAuthStateChanged(user => {
    if(user) {
        console.log('user has signed in or up', user);
        return <Redirect to='/dashboard'/>;
    } else {
        console.log('user signed out or still need to sign in', user);
        // browserHistory.replcae('/signin')
        return <Redirect to='/signin'/>;
    }
})
ReactDOM.render(
    <Router path="/">
        <div>
            <Route path="/dashboard" component={App} />
            <Route path="/signup" component={Signup} />                                                                    
            <Route path="/signin" component={Signin} />
        </div>
    </Router>, document.getElementById('root')
);

我做错了什么，请帮助我新手反应

Answer 1

您需要为路由器创建一个组件，并在该组件中调用逻辑。用类似的类替换自由浮动的firebaseapp功能...

class Routes extends React.Component {
  componentDidMount() {
    firebaseApp.auth().onAuthStateChanged(user => {
    if(user) {
        console.log('user has signed in or up', user);
        return <Redirect to='/dashboard'/>;
    } else {
        console.log('user signed out or still need to sign in', user);
        // browserHistory.replcae('/signin')
        return <Redirect to='/signin'/>;
    }
   })
  }
  render() {
    return (
         <div>
            <Route path="/dashboard" component={App} />
            <Route path="/signup" component={Signup} />                                                                    
            <Route path="/signin" component={Signin} />
        </div>)
  }
} 

然后，您可以在Reactdom.render中引用此组件。

ReactDOM.render(
    <Router>
        <Routes>
    </Router>, document.getElementById('root')
);