Question

我将react-router与NavLink一起使用，因为我想为活动链接设置样式。这是菜单组件：

import React from 'react';
import {NavLink} from 'react-router-dom';

export default class Menu extends React.Component{
render(){
    return (
        <nav>
            <NavLink className="nav-link" to="/"
                activeClassName="active" exact={true}>Home</NavLink>

            <NavLink className="nav-link to="/messages"
                activeClassName="active" exact={true}>Messages</NavLink>

菜单组件包含在另一个使用Header的组件mapStateToProps中：

....
    return(
        <div>
            ....
            <Menu />
        </div>
....

function mapStateToProps(state) {
    return  {....}
}
export default connect(mapStateToProps)(Header);

我有RouterApp和Header和PageComponents：

....
const store = configureStore();


const AppRouter = ({store}) => (
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Header/>
                <Switch>
                    <Route path="/" component={HomePage} exact={true} />
                    <Route path="/messages" component={MessagesPage} exact={true} />
                    <Route component={NotFoundPage} />
                </Switch>
           </div>
       </BrowserRouter>
   </Provider>
);

当我在浏览器中访问根路由时，home链接的类别为active，而组件的链接为HomePage。

如果我单击消息链接，则会呈现正确的组件-MessagesPage，但是主链接保留在activeClass和NavLink中，因为消息不包含。

如果我从mapStateToProps组件中删除了Header，一切正常，但是，有了它，活动类将不适用于当前链接。

Answer 1

将Header组件渲染为默认Route或使用withRouter HOC组件使Navlink可以正常工作

<Route component={Header}/>

或

export default withRouter(connect(mapStateToProps)(Header));

如果组件具有mapStateToProps，则React Router不应用NavLink活动类

1 个答案: