Question

我提到了许多描述同样问题的链接。他们之中有一些是 here和here。我刚开始做出反应，发现很难理解那里的解释。我按照教程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>
    );
};

此代码使浏览器中的网址相应更改。但风格没有更新。对于所有操作，链接“全部”为红色。

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

Answer 1

我发现了这个错误。问题出在这里

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

"to"道具必须在开头提供"/"，如上所示。

我之前错过了这个。这解决了我的问题。也不需要传递位置道具。在教程中，他在FilterLink组件中没有使用“/”。由于我使用的是新版本，但代码无效。

NavLink中的ActiveStyle在react-router

1 个答案: