반응 라우터 루트에 소품을 통과시키는 방법은 무엇입니까?

Question

firebase로 간단한 앱을 구축하여 반응 라우터 (v4)를 배우려고하는데, 내가하고있는 일은 firebase를 사용하여 google을 사용하여 사용자가 로그인 할 때 다른 구성 요소로 리디렉션되고 루트로 이동할 때입니다. 경로 다시 '/'더 이상 내가

내 첫 번째 문제는 사용자가로 리디렉션됩니다 성공적인 인증에 두 가지 문제가

을 (내가 상태를 기준으로 리디렉션하여이 일을하고) 로그인을 볼 수 없습니다/예상대로 대시 보드로 돌아가거나 루트 경로를 다시 입력하면 로그인 페이지가 간략하게 표시되고 리디렉션됩니다. 내 방법이 충분히 빠르기 때문에 생각하지 않습니다. componentWillMount();

내 두 번째 문제는 대시 보드에 일부 소품을 전달하고 싶지만 인터넷에서 검색하고 찾고있는 방법을 모르지만 구현 방법을 모릅니다.

이것은 내 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"/> 
     } 
    } 

여기 내 로그인 상태에서 현재 사용자 상태를 가져 오는 방법을 모르기 때문에 사용자를위한 새로운 상태를 만드는 대시 보드입니다 ...

(210)

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에 뛰어하지 않으려는 것을 알고

....

Answer 1

놓습니다에서 .onAuthStateChanged 코드 componentDidMount 메소드를 대시 보드 및 로그인 페이지가 아닌 라우트 파일에 추가하십시오. 라우트 파일이 대시 보드의 가장 낮은 상위 조상이고 로그인 구성 요소가 인증을 처리하고 사용자를 각 라우트의 지주로 전달합니다. 두 구성 요소 모두에서 인증하는 것과는 대조적으로 소품을 기반으로 리디렉션을 처리합니다. 소도구를 <Route/> 구성 요소에 직접 배치 할 수 없으므로 공용 또는 사설 Routes 상위 구성 요소를 작성하고 대체 경로 구성 요소로 해당 소품을 병합해야합니다.

나는 보통 내 경로 파일의 맨 아래에 이러한 파일을 표시하거나 파일을 자신의 파일에 저장하고 가져올 수 있습니다. 이제

const renderMergedProps = (component, ...rest) => { 
    const finalProps = Object.assign({}, ...rest) 
    return React.createElement(component, finalProps) 
} 

const PublicRoute = ({ component, ...rest }) => { 
    return (
    <Route 
     {...rest} 
     render={routeProps => { 
     return renderMergedProps(component, routeProps, rest) 
     }} 
    /> 
) 
} 

const PrivateRoute = ({ component, authed, ...rest }) => { 
    return (
    <Route 
     {...rest} 
     render={routeProps => 
     authed === true ? (
      renderMergedProps(component, routeProps, rest) 
     ) : (
      <Redirect 
      to={{ pathname: '/login', state: { from: routeProps.location } }} 
      /> 
     )} 
    /> 
) 
} 

당신이 <Router/> 구성 요소의 위치에 있지만 사용자 소품 이러한 고차 구성 요소를 사용할 수는 병합 (또는 누군가가하는 대신에 로그인하거나되지 않은 경우는 표시하려면 authed 부울 소품을 사용할 수 있습니다 전체 사용자 객체를 전달하고 authed 부울을 상태로 설정하고 onAuthStateChanged이 사용자를 등록하면 true로 설정합니다.

<BrowserRouter> 
    <div> 
      <Switch> 
      <PublicRoute 
       exact 
       path='/' 
       component={Login} 
       authed={this.state.authed} /> 
      <PrivateRoute 
       path="/dashboard" 
       component={MainDashBoard} 
       user={this.state.user} 
      /> 
      </Switch> 
     </div> 
</BrowserRouter>