response-router v4 и NavLink - маршруты должны быть в отдельном компоненте

Question

При нажатии на NavLink мое приложение не обновлялось. Ожидается, что NavLink обновит список задач на основе ссылки фильтра.

Решением для этого было выделение маршрута в отдельный функциональный компонент без сохранения состояния:

const MyRoutes = () => (
    <Route path='/:filter?' component={App} />
);

const Root = ({store}) => (
    <Provider store={store}>
        <Router>
            <MyRoutes/>
        </Router>
    </Provider>
);

Это работает.

Но при том же маршруте внутри маршрутизатора NavLink не вызывает новый список задач.

Что может объяснить, что я должен извлечь маршрут в отдельный компонент?

Answer 1

Вам не нужно это делать. Правильный способ - импортировать Switch из react-router-dom и использовать его следующим образом:

import { Switch, BrowserRouter as Router, Route } from 'react-router-dom'

const Root = ({store}) => (
    <Provider store={store}>
        <Router>
            <Switch>
                <Route path='/:filter' component={App} />
            </Switch> 
        </Router>
    </Provider>
);

Если вы хотите определить основной маршрут, вам нужно использовать exact реквизит компонента Route:

<Route exact path='/:filter' component={App} />

РЕДАКТИРОВАТЬ: Чтобы использовать exact, ваш маршрут должен быть внутри Switch