javascript - getting an error related to react hook useHistory - Stack Overflow

admin管理员组

文章数量:1397117

I have implemented useHistory() same as i implemented below , previously i didnt get any error but in this pmonent i am getting an error as

Line 6:18: React Hook "useHistory" is called in function "showPost" which is neither a React function ponent or a custom React Hook function react-hooks/rules-of-hooks

import React from 'react';
import CloseIcon from '@material-ui/icons/Close';
import {useHistory} from 'react-router-dom';

const showPost = () =>{
    let history = useHistory();

    const closeUpload = () =>{
        history.goBack();
    }

    return(
        <div className="overlay">
            <div className="overlay-container">
                <button className="close-btn" onClick = {closeUpload}><CloseIcon color="action"/></button>
                <h1>Hello</h1>
            </div>
        </div>
    );
}

export default showPost;

please, help me in solving this. thank you in advance.

I have implemented useHistory() same as i implemented below , previously i didnt get any error but in this pmonent i am getting an error as

Line 6:18: React Hook "useHistory" is called in function "showPost" which is neither a React function ponent or a custom React Hook function react-hooks/rules-of-hooks

import React from 'react';
import CloseIcon from '@material-ui/icons/Close';
import {useHistory} from 'react-router-dom';

const showPost = () =>{
    let history = useHistory();

    const closeUpload = () =>{
        history.goBack();
    }

    return(
        <div className="overlay">
            <div className="overlay-container">
                <button className="close-btn" onClick = {closeUpload}><CloseIcon color="action"/></button>
                <h1>Hello</h1>
            </div>
        </div>
    );
}

export default showPost;

please, help me in solving this. thank you in advance.

• javascript
• reactjs
• react-hooks
• react-router-dom

Share Improve this question Follow asked Oct 20, 2020 at 12:51 user10112169user10112169 11122 silver badges88 bronze badges 1

• Good day. What version of React and React Router are you using? You need React 16.8+ and React Router 5.1 to 6.0 ( useHistory() does not work before 5.1 or after 6.0). – bolarson Commented Oct 20, 2020 at 13:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You should allways call your React ponent with Capital letter.

UPD: From https://reactjs/docs/ponents-and-props.html#rendering-a-ponent

Note: Always start ponent names with a capital letter. React treats ponents starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a ponent and requires Wele to be in scope.

https://reactjs/docs/jsx-in-depth.html#html-tags-vs.-react-ponents

Just capitalize the ponent

const showPost 

To

const ShowPost 

Do as well as for the

export default showPost 

To

export default ShowPost 

本文标签： javascriptgetting an error related to react hook useHistoryStack Overflow