response-router-v4 NavLink не перерисовывает компоненты

Question

В реагирующем маршрутизаторе 2 щелчок по компоненту «Ссылка» вызовет повторную визуализацию компонентов.

Я преобразовываю свой проект в реагирующий маршрутизатор 4, используя «NavLink» вместо «Link».Все работает, кроме этого: щелчок по «NavLink» не переопределяет мой компонент (обновляет мой список задач), он только меняет ссылку.

Что-нибудь, что я должен добавить где-нибудь, чтобы эта работа работала?Он отлично работает с реагирующим маршрутизатором 2 "Link".

Вот пример кода:

App.js:

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

Footer.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);

Answer 1

Благодаря @ kiarashws

Маршрут необходимо пройти внутри отдельного компонента:

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

Если вместо «MyRoutes» я пройду маршрут напрямую, NavLink не будетвызвать обновление Todos.Так почему маршрут должен быть в отдельном компоненте?

Answer 2

В 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>