Lỗi thuộc tính href trong ReactJS

#1

em đang học ReactJS và bị gặp lỗi như này. Em đã search google mà vẫn chưa hiểu. Giusp em với , em cảm ơn

The href attribute is required for an anchor to be keyboard accessible.
Provide a valid, navigable address as the href value

image
image.png1912×281 22.8 KB

#2

tag < a > nào đó của bạn bị thiếu thuộc tính href.

5 Likes
#3

href=’#’ . nó vẫn báo lỗi y như vậy

#4

Vậy thì bạn phải tạo ra 1 project nhỏ để tái tạo lỗi này, rồi đưa lên đây.

2 Likes
#5

Giống ở đây nhỉ:

2 Likes
#6

Dùng Link component thay thế cho <a> nhé.

import { Link } from 'react-router-dom'

<Link to="/about">About</Link>
2 Likes
#7 
import React, { Component } from 'react';
import './App.css';

class App extends Component {

  render() {
        return(
  <div>
         
          <nav className="navbar navbar-inverse">
               <div className="container-fluid">
                 <a className="navbar-brand">Props</a>

               </div>
           </nav>
           <div className="container">
              <div className="row">
                  <div className="row">
                    <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                     </div>
                  
                </div>
              </div>
              
            </div> 
        </div>  


       );
  }
}

export default App;
#8

Nó cứ bị warning, thật sự em vẫn chưa hiểu phải fix như thế nào

#9

Vậy ra cái này là cảnh báo của eslint, nếu để “#” mà vẫn bị thì hãy để là "# " (có dấu cách) thì sẽ không bị nữa, cái này chắc chắn là bug của eslint rồi.
Trong này: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
nó bảo dùng “#” mà vẫn bị cảnh báo.

3 Likes
#10

trong thẻ a phải thêm thuộc tính href. Trong thuộc tính href sẽ phải gán giá trị "# " (# và dấu cách) hoặc "!#". Tóm lại là <a href="!#"> hoặc <a href="# ">

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?