React 无法识别 DOM 元素上的 `activeKey` 属性

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>

我得到的错误是：

警告：React 无法识别 DOM 元素上的 activeKey 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 activekey。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

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

有什么想法吗？

Answer 1

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

解决方案是像这样使用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'));