函数作为 React 子级无效——在构建 PrivateRoute 组件时 React 版本 16

Question

您好，我已经构建了一个 ProtectedRoute 组件，我希望将它包含在我的 App 组件中。虽然我看到它适用于许多其他人，但我不确定为什么我是个奇怪的人。代码如下：

const PrivateRoute = ({ component: Component, path, ...rest }) => {
 return (<Route {...rest} render={(props) => (
    firebaseApp.auth().onAuthStateChanged(user => {
        if (user) {
            <Component {...props} />;
        } else {
            <Redirect
                to={{
                    pathname: "/",
                    state: {
                        prevLocation: path,
                        error: "You need to login first!",
                    },
                }}
            />
          }
       })
     )} />
   )
}

class App extends Component {
 displayName = App.name

 constructor(props) {
    super(props);
 }

 render() {

    return (
        <Layout>
            <Route exact path='/' component={Home} />
            <Route path='/signin' component={SignIn} />
            <Route path='/signup' component={SignUp} />
            <PrivateRoute path='/counter' component={Counter} /> 
            <Route path='/fetchdata' component={FetchData} />
        </Layout>
    );
 }
}

export default App;

Answer 1

Routes 渲染方法正在返回一个它不应该返回的函数

firebaseApp.auth().onAuthStateChanged

在您的情况下，您应该使用 React 组件而不是功能组件。

const withAuth = (Component) => {
    class AuthComp extends React.Component {
       state={
           loading: true,
           user: null
       }
       componentDidMount() {
         firebaseApp.auth().onAuthStateChanged(user => {
                this.setState({loading: false, user})
         });
       }
       render() {
           if(loading) {
               return <div>Loading...</div>
           }
           if(!loading && !user) {
             return <Redirect
                    to={{
                        pathname: "/",
                        state: {
                            prevLocation: path,
                            error: "You need to login first!",
                        },
                    }}
                />
           }
           return <Component {this.props} />

       }
    }
}


const PrivateRoute = ({ component: Component, path, ...rest }) => {
   return (<Route {...rest} component={withAuth(Component)} />)
}