javascript - React 无法识别 DOM 元素上的 `activeKey` Prop

Question

首先:我知道已经有几个关于这个错误的问题，但他们有不同的来源(我认为)。这是我的代码:

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

我得到的错误是这样的:

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.

问题是，我相信嵌套，但我不知道这里有什么问题。

有什么想法吗？

Answer 1

问题在于您不应将 DOM 元素直接嵌套在 Nav 组件下，而应使用 NavItem。这种方法的问题是 NavItem 是 anchor 并且在它下面嵌套 Link 会引发另一个错误，因为 Link 是也是一个 anchor 。

解决方案是像这样使用 react-router-bootstrap 中的 LinkContainer。

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