Redirect authenticated users in a react router v4

问题

I create a simple login application using react js and firebase

when I sign up it will create a user in firebase I need to ridirect auth user to another page my Index.js file like below

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')
);

What did I do wrong please help me Im new to react

回答1:

You need to create a component for your router and call your logic in that component. Replace your free-floating firebaseApp function with a class like so...

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>)
  }
} 

Then you can reference this component in ReactDOM.render like so...

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

来源：https://stackoverflow.com/questions/48877828/redirect-authenticated-users-in-a-react-router-v4