NavLink 中的 ActiveStyle 在反应路由器中无法正常工作

Question

我参考了许多描述同样问题的链接。他们之中有一些是 and here. I just started react and finding it very difficult to understand what's been explained over there. I followed the tutorial building react applications with idiomatic redux code。因为使用的路由器版本是旧的。我更新到 4 并遇到了这个问题。我的代码如下。

const Root = ({ store }) => (
    <BrowserRouter>
        <Provider store={store}>
            <Route path="/:filter?" component={App} />
        </Provider>
    </BrowserRouter>
);

class App extends Component {
    render() {
        return (
            <div>
                <AddTodo />
                <VisibleTodoList />
                <Footer location={this.props.location}/>
            </div>
        );
    }
}

const Footer = ({ location }) => (
    <p>
        Show :{" "}
        <FilterLink location={location} filterValue="all">
            All
        </FilterLink>{" "}
        <FilterLink location={location} filterValue="active">
            Active
        </FilterLink>{" "}
        <FilterLink location={location} filterValue="completed">
            Completed
        </FilterLink>
       </p>
);

const FilterLink = ({ filterValue, children, location }) => {
    return (
        <NavLink
            to={filterValue === "all" ? "" : filterValue}
            activeStyle={{ textDecoration: "none", color: "red" }}
        >
            {children}
        </NavLink>
    );
};

此代码使浏览器中的 url 相应地发生变化。但是样式没有更新。对于所有操作，Link "All" 为红色。

我理解传递 location 道具（根据解释here）将使组件重新渲染并且样式将得到更新（如果我在这里错了请更正）。但它没有发生。有人可以帮我解决这个问题吗？

Answer 1

我猜错了。问题出在这里

const FilterLink = ({ filterValue, children }) => {
    return (
        <NavLink
            exact
            to={filterValue === "all" ? "/" : `/${filterValue}`}
            activeStyle={{ textDecoration: "none", color: "red" }}
        >
            {children}
        </NavLink>
    );
};

The "to" props must be provided with the "/" at the beginning as shown above.

我之前错过了这个。这解决了我的问题。也不需要传递位置道具。在教程中，他在 FilterLink 组件中使用了不带“/”的内容。由于我使用的是新版本，所以代码不起作用。

NavLink 中的 ActiveStyle 在反应路由器中无法正常工作

ActiveStyle in NavLink is not working properly in react-router

reactjs

react-router-v4

react-router-dom