React не распознает реквизит activeKey для элемента DOM - PullRequest
Новая
       5

React не распознает реквизит activeKey для элемента DOM

0 голосов
/ 30 ноября 2018

Во-первых: я знаю, что уже есть пара вопросов об этой ошибке, но у них был другой источник (я думаю).Вот мой код: 

<BrowserRouter>
    <React.Fragment>
        <Navbar className='navbar_all'>
            <Navbar.Header>
                <Navbar.Brand>
                    <Link className='navbar_brand' id='home' to='/'>
                        <img alt='ZdajTo' src="assets/images/new_logo.png" style={{height: '30px'}}/>
                    </Link>
                </Navbar.Brand>
            </Navbar.Header>
            <Nav className='float_right'>
                <Link to='/homepage' style={{textDecoration: 'none'}}> 
                {/*^^^^^^^^^^^^ This line throws an error*/}

                    <button style={{
                        backgroundColor: '#F16049',
                        border: '4px solid #F16049',
                        borderRadius: '4px',
                        padding: '10px',
                        marginBottom: '5px',
                        color: '#fff'
                    }}>
                        DLA ROZWIĄZUJĄCYCH
                    </button>
                </Link>
            </Nav>
        </Navbar>
    </React.Fragment>
</BrowserRouter>

Я получаю следующую ошибку:

Предупреждение: React не распознает пропелу activeKey на элементе DOM.Если вы намеренно хотите, чтобы он отображался в DOM в качестве пользовательского атрибута, вместо этого пишите его строчными буквами activekey.Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

Проблема в том, что я верю во вложение, но я понятия не имею, что здесь может быть не так.

Есть идеи?

1 Ответ

0 голосов
/ 30 ноября 2018

Проблема в том, что вам не следует вкладывать элементы DOM непосредственно в компонент Nav, вместо этого используйте NavItem.Проблема с таким подходом заключается в том, что NavItem равно anchor, а вложенность Link под ним вызовет еще одну ошибку, поскольку Link также является якорем.

Решение заключается в использовании LinkContainer из react-router-bootstrap вот так. 

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Nav, NavItem, Navbar } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

const app = (
    <BrowserRouter>
        <Navbar>
            <Nav>
                <LinkContainer to="/somewhere">
                    <NavItem>somewhere</NavItem>
                </LinkContainer>
            </Nav>
        </Navbar>
    </BrowserRouter>
);

ReactDOM.render(app, document.getElementById('root'));
...