React Router V4-activeStyle和activeClassName不起作用

时间:2018-08-12 21:26:14

标签: javascript reactjs react-router react-router-v4

由于某些原因,我的NavLink组件的activeStyle和activeClassName道具不起作用。我在这里做错什么了吗?也许我正在使用v3语法?

import React from "react";
import {NavLink, Route} from "react-router-dom";

//...Imports of router components

export default class Layout extends React.Component {
    render() {
        return (
            <div>
                <NavLink activeStyle={{ color:'red' }} to="archives">
                   Archives
                </NavLink>
                <NavLink activeClassName="active" to="settings">
                    Settings
                </NavLink>
                //...Routes are here
            </div>
        );
    }
}

1 个答案:

答案 0 :(得分:2)

我相信唯一的问题是缺少斜线,这意味着:

<NavLink activeStyle={{ color:'red' }} to="/archives"> Archives </NavLink>    

<NavLink activeClassName="active" to="/settings"> Settings </NavLink>

应该工作。