URL с идентификатором, не обрабатываемым маршрутизатором React

Я использую React Router v4 в своем приложении ReactJs и похоже, что всякий раз, когда у меня есть путь с идентификатором в нем, React Router не обрабатывает его, потому что я вижу, что страница обновляется, и я теряю все данные в моем хранилище Redux в процессе.

Вот мой раздел маршрутов: 

<Switch>
   <Route exact path="/member" component={Home} />
   <Route exact path="/member/accounts" component={Accounts} />
   <Route path="/member/projects/profile/:id" component={ProjectProfile} />
</Switch>

Вот как я генерирую ссылку. Это ссылка, когда пользователь нажимает, я вижу обновление в моем браузере.

import { Link } from 'react-router-dom';

... omitted for brevity
const profileUrl = "/member/projects/profile/" + project.id;

<Link to={profileUrl}>Click here</Link>

Другие ссылки, определенные в моих маршрутах, работают нормально, например, home и accounts.

Что я делаю? здесь что-то не так?

2 2
reactjs react-router react-router-v4 react-router-dom

2 ответа:

Передаете ли вы onClick обработчик событий компоненту Link?

Если да, то убедитесь, что с обработчиком все в порядке. Вы можете попробовать временно удалить его, чтобы отладить обновление.

Кредиты:

  1. https://stackoverflow.com/a/46115304/4312466
  2. https://github.com/ReactTraining/react-router/pull/4066#issuecomment-383910759
0

После долгих испытаний я нашел причину. Мы должны использовать NavLink или Link из react-router-dom всякий раз, когда связываемся с компонентом.

Я заметил, что не был последователен в использовании NavLink в моем приложении. Вместо этого я использовал обычный

<a href={myModuleUrl}>Module Name</a>.

Как только я переключился на использование NavLink, это сработало, как и было задумано.

0