Question

为什么我不能在路由直接组件中使用react钩子，在其他地方我可以使用钩子就没有问题了。任何人都可以回答这个问题，我该如何在这些组件中使用钩子

这是错误

./ src / Pages / bookingPage.js 6:29行：在“ bookingPage”函数中调用React Hook“ useState”，该函数既不是React函数组件也不是自定义的React Hook函数react-hooks / rules-of-hooks

搜索关键字以详细了解每个错误。

这是我的app.js

import React, { useState } from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import AuthPage from './Pages/authPage'
import EventPage from './Pages/eventPage'
import BookingPage from './Pages/bookingPage';
import MainNavigator from './component/MainNavigator';
import AuthContext from './component/context/auth-context';

function App() {
  const [token, setToken] = useState(null);
  const [userId, setUserId] = useState(null);
  const login = (token, userId, expirationTime) => {
    setToken(token);
    setUserId(userId);
  }
  const logout = () => {
    setToken(null);
    setUserId(null);
  }
  return (
    <Router>
      <React.Fragment>
      <AuthContext.Provider value={{ token: token, userId: userId, login: login, logout: logout }}>
        <MainNavigator />
        <Switch>
          {!token && <Redirect from="/" to="/auth" exact />}
          {token && <Redirect from="/" to="/events" exact />}
          {token && <Redirect from="/auth" to="/events" exact />}
          {!token && <Route path="/auth" component={AuthPage} />}
          <Route path="/events" component={EventPage} />
          {token && <Route path="/bookings" component={BookingPage} />}
        </Switch>
      </AuthContext.Provider>
      </React.Fragment>
    </Router>
  );
}

export default App;

这是我的预订页面组件

 import React, { useState } from 'react'
import { Grid, } from '@material-ui/core';

import '../App.css';
const bookingPage = () => {
    const [book, setBook] = useState(false);
    return (
        <Grid container className='container_booking'>
            <Grid item lg={12} sm={12} xs={12}>
                <h1>bookibPage</h1>
                {book}
                <button onClick={() => setBook(true)}>click me</button>
            </Grid>
        </Grid>
    )
}

export default bookingPage

Answer 1

从React函数组件中调用钩子。

阅读此Rules of React-Hooks

将函数名称更改为BookingPage

const BookingPage = () => {
    const [book, setBook] = useState(false);
    return (
        <Grid container className='container_booking'>
            <Grid item lg={12} sm={12} xs={12}>
                <h1>bookibPage</h1>
                {book}
                <button onClick={() => setBook(true)}>click me</button>
            </Grid>
        </Grid>
    )
}

export default BookingPage

Answer 2

您的bookingPage组件名称应以大写字母开头

import React, { useState } from 'react'
import { Grid, } from '@material-ui/core';

import '../App.css';
const BookingPage = () => {
    const [book, setBook] = useState(false);
    return (
        <Grid container className='container_booking'>
            <Grid item lg={12} sm={12} xs={12}>
                <h1>bookibPage</h1>
                {book}
                <button onClick={() => setBook(true)}>click me</button>
            </Grid>
        </Grid>
    )
}

export default BookingPage

不能在react-router-dom组件中使用React钩子

2 个答案: