Question

我使用react js和firebase

创建一个简单的登录应用程序

当我注册它会在firebase中创建一个用户我需要将auth用户链接到另一个页面我的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')
);

在反应路由器v4中重定向经过身份验证的用户

1 个答案: