11

反応ルーターにはあまり慣れていませんが、li要素ではなく親要素にアクティブなクラスを設定するには、NavLink の機能が必要aです。

これを実装するために、のソース コードを見て、NavLinkそれを新しい要素にコピーしました。(typescriptを使った例ですが、とにかくjsとほぼ同じです)

import * as React from 'react';
import { Link, withRouter, Route } from 'react-router-dom';


class LiNavLink extends React.Component<any, {}> {
    render() {
        const {to,exact, strict, activeClassName, className, activeStyle, style, isActive: getIsActive, ...rest } = this.props;
        return (
            <Route
                path={typeof to === 'object' ? to.pathname : to}
                exact={exact}
                strict={strict}
                children={({ location, match }) => {
                    const isActive = !!(getIsActive ? getIsActive(match, location) : match)

                    return (
                        <li 
                            className={isActive ? [activeClassName, className].join(' ') : className}
                            style={isActive ? { ...style, ...activeStyle } : style}>
                            <Link
                                to={to}
                                {...rest}
                            />
                        </li>
                    )
                }}
            />
        );
    }
}

export default LiNavLink;

次に使用法:

<ul>
   <LiNavLink activeClassName='active' exact={true} strict to="/example"><span>Active</span></LiNavLink>
   <LiNavLink activeClassName='active' exact={true} strict to="/example/archived"><span>Archived</span></LiNavLink>
</ul>

私が使用しているHashRouter何らかの理由で、これはルートが変更されたときに更新されず、ページをハードに「更新」したときにのみ更新されます。

小道具が決して変わらないので、更新されないと思いますか?それで、それは自分自身を更新することを知りませんか?

これを更新するにはどうすればよいですか?それとも私の問題は別の場所にありますか?

4

4 に答える 4