为什么 useRouteMatch 不能按预期工作？

Question

基本上，我将活动类添加到通过使用 useRouteMatch 来检查 to 是否等于实际路径点击的导航项。但是，当路径再次为 "/" 时，最后一个活动项目仍保持活动状态。可能是什么原因？

function CustomLink ({to,exact,children,classes=''}) {
        const match = useRouteMatch({
            exact: exact,
            path: to
        });

        return(
            <Link className={match ? 'active ' + classes : ''} to={to}>{children}</Link>
        )
    }

<Router>
    <Link to="/" className="logo">
        <img src={require('../Assets/img/magical-logo.svg').default} alt=""/>
    </Link>
</Router>
<div className="the-rest">
    <Router>
        <nav>
            <CustomLink to="/readers" exact={true}>For readers</CustomLink>
            <CustomLink to="/authors" exact={true}>For authors</CustomLink>
            <CustomLink to="/about" exact={true}>About</CustomLink>
            <CustomLink to="/contact" exact={true}>Contact</CustomLink>
        </nav>
    </Router>
</div>

Answer 1

刚刚发现问题是我在组件内使用了两个单独的 Route 元素。当只有一个时，一切正常。

所以，而不是这样：

<Router>
    <Link to="/" className="logo">
        <img src={require('../Assets/img/magical-logo.svg').default} alt=""/>
    </Link>
</Router>
<div className="the-rest">
    <Router>
        <nav>
            <CustomLink to="/readers" exact={true}>For readers</CustomLink>
            <CustomLink to="/authors" exact={true}>For authors</CustomLink>
            <CustomLink to="/about" exact={true}>About</CustomLink>
            <CustomLink to="/contact" exact={true}>Contact</CustomLink>
        </nav>
    </Router>
</div>

我用过这个：

<Router>
    <Link to="/" className="logo">
        <img src={require('../Assets/img/magical-logo.svg').default} alt=""/>
    </Link>
    <div className="the-rest">
        <nav>
            <CustomLink to="/readers" exact={true}>For readers</CustomLink>
            <CustomLink to="/authors" exact={true}>For authors</CustomLink>
            <CustomLink to="/about" exact={true}>About</CustomLink>
            <CustomLink to="/contact" exact={true}>Contact</CustomLink>
        </nav>
    </div>
</Router>

它奏效了