firebaseを使ってシンプルなアプリを構築することで、ルータ(v4)を詳しく調べようとしていますが、私がやっているのは、firebaseを使ってgoogleを使ってログインしたときに別のコンポーネントにリダイレクトされ、パスを再び「/」、彼らはもはや、ログインが表示されます(私は状態に基づいてリダイレクトすることでこれをやっている)反応炉ルートに小道具を通すにはどうしたらいいですか?
私は2つの問題
を持っている私の最初の問題は、ユーザーがリダイレクトされます認証の成功の上にあります/ダッシュボードが予想どおりに戻ってくるか、ルートパスをもう一度入力すると、ログインページが短時間表示されてリダイレクトされます。私の方法が十分に速いわけではないので、componentWillMount();
私の2番目の問題は、ダッシュボードにいくつかの小道具を渡したいのですが、どうやって見ていてインターネットで検索していたのですが、どうやって実装するのか分かりません...
これは私のlogin.jsです。私はcurrentUserをダッシュボードに渡したいと思っています。また、ユーザーがログインパスに戻ったときにログインしていれば、ログインページを表示せずにすばやくリダイレクトしたいと考えています...
state = {
currentUser: null,
successLogin: false
}
googleAuth =() => {
auth.signInWithPopup(provider).then(response => {
const token = response.credential.accessToken;
const currentUser = response.user;
}).catch(error => {
console.log(error.code , 'occured');
})
}
// firebase.auth().signInWithPopup(provider).then(function(result) {
// var token = result.credential.accessToken;
// var user = result.user;
// }).catch(function(error) {
// var errorCode = error.code;
// var errorMessage = error.message;
// var email = error.email;
// var credential = error.credential;
// });
componentDidMount() {
auth.onAuthStateChanged(user => {
if(user) {
console.log('a user was successfuly logged in')
this.setState({
currentUser: user.displayName,
successLogin: true
})
} else {
console.log('eerror')
}
})
}
componentDidUpdate() {
if(this.state.successLogin){
this.props.history.replace("/dashboard");
} else {
console.log('not a successful login');
}
}
componentWillMount() {
if(this.state.successLogin){
<Redirect to="/dashboard"/>
}
}
ここに私のダッシュボードは私がログインから現在の状態を取得する方法を知らないので、ユーザーの新しい状態を作成しています...
state = {
user: null
}
componentDidMount(){
auth.onAuthStateChanged(user => {
this.setState({
user: user.displayName
})
})
}
render(){
const { user } = this.state;
return (
<h1> DashBoard {user}</h1>
)
}
}
は、これが私のroutes.js
<BrowserRouter>
<div>
<Switch>
<Route path='/' exact component={Login} />
<Route path='/register' component={Register} />
<Route path='/dashboard' component={MainDashBoard} />
</Switch>
</div>
</BrowserRouter>
私はReduxのを使用することができますが、私はまだReduxのにジャンプしたくないことを知っている
....
実際よりもはるかに複雑に思えます。これがあなたを脅かさないようにしてください。あなたのルータの学習を続行してください、あなたがコードの塊をたくさん繰り返すまで、ホックの小穴を下ってはいけません。ルーティングは、ホックを使用して最適化するよりもずっと前に快適にすべき基礎です。 –
私はこれを行うもっとずっと簡単な方法を見つけました。パブリックルートの場合は、レンダリングプロップを使用できます。ランディングページのルートに5番を渡したいとします。 '' ' } /> ''ブーム! –