3

First: I know there are already a couple of questions about this error, but they had a different source (I think). Here's my code:

<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>

The error I'm getting is this:

Warning: React does not recognize the activeKey prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase activekey instead. If you accidentally passed it from a parent component, remove it from the DOM element.

The problem is, I believe in the nesting, but I have no idea what can be wrong here.

Any ideas?

1 Answer 1

2

The issue is that you should not nest DOM elements directly under Nav component, instead use NavItem. Problem with such approach is that NavItem is anchor and nesting Link under it will throw another error, since Link is also an anchor.

Solution is to use LinkContainer from react-router-bootstrap like this.

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'));

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.