时间戳

首页 > 解决方案 > 不能在 react-router-dom 组件中使用 React 钩子

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

问题描述

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

这是错误

./src/Pages/bookingPage.js 第 6:29 行：React Hook "useState" 在函数 "bookingPage" 中被调用，该函数既不是 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

标签： reactjsreact-router-dom

解决方案

从 React 函数组件调用 Hooks。

阅读这个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

推荐阅读