react-router-v4 NavLink 不重新渲染组件答案

【问题标题】：react-router-v4 NavLink not rerendering componentsreact-router-v4 NavLink 不重新渲染组件
【发布时间】：2018-05-11 19:57:03
【问题描述】：

使用 react router 2，单击“链接”组件将触发组件的重新渲染。

我正在将我的项目转换为响应路由器 4，使用“NavLink”而不是“Link”。除此以外，一切正常：单击“NavLink”不会重新呈现我的组件（更新我的待办事项列表），它只会更改链接。

有什么我应该在某处添加的东西来完成这项工作吗？与 react router 2 "Link" 一起工作得很好。

这里是示例代码：

App.js：

const App = ({ match: { params } }) => {
  return (
    <div>
      <AddTodo />
      <VisibleTodoList filter={params.filter || 'all'} />
      <Footer />
    </div>
  )
}

页脚.js：

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

Filterlink.js：

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

VisibleTodoList.js：

const mapStateToProps = (state, ownProps) => {
  return {
    todos: getVisibleTodos(
        state.todos,
        ownProps.filter
    ),
  };
};

const mapDispatchToProps = (dispatch) => ({
    onTodoClick(id) {
        dispatch(toggleTodo(id))
    },
});

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList);

【问题讨论】：

标签： reactjs react-router react-router-v4

【解决方案1】：

v4 中不再有 params 道具了，好吧，不像以前那样了，

你必须改变一些事情。

在你的App.js：

// imports

import {withRouter} from 'react-router'

// ...

let App = ({ match }) => ( // change params to match
  return (
    <div>
      <AddTodo />
      <VisibleTodoList filter={match.params.filter || 'all'} />
      <Footer />
    </div>
  )
}

App = withRouter(App)

请记住，如果您想将 react-redux connect HOC 添加到 App.js，则必须将 connect() 包装为 withRouter()：

App = withRouter(connect()(App))

然后你在哪里导入App：

import {Router} from 'react-router'
import createHistory from 'history/createBrowserHistory'
import App from './path/to/App'

// ...

<Router history={createHistory()}>
   <App />
</Router>

【讨论】：

我的参数错误，我的代码已经没问题了。我已经编辑了我的主要帖子。它还不能与“withRouter”“connect”一起使用。我应该尝试将其添加到 VisibleTodoList 组件中吗？
另外，我使用的是“react-router-dom”（导致 react-router v4），而不是“react-router”。它不是这样工作的：const VisibleTodoList = withRouter(connect( mapStateToProps, mapDispatchToProps ))(TodoList);

【解决方案2】：

感谢@kiarashws

路由需要在单独的组件中传递：

const MyRoutes = () => (
    <Route path='/:filter?' component={App} />
);
render(
    <Provider store={store}>
          <Router>
              <MyRoutes/>
          </Router>
    </Provider>,
    document.getElementById('root')
)

如果我直接传递路径而不是“MyRoutes”，则 NavLink 不会触发 Todos 更新。那么为什么路由需要在一个单独的组件中呢？

【讨论】：

Redux HOC 正在搞乱 React Router HOC。要修复它，您需要使用withRouter。