Показать / Скрыть компоненты маршрута в реакции - PullRequest
0 голосов
/ 02 октября 2018

Я работаю над приложением React, у которого есть такие маршруты:

<Switch>
        <Route path="/edituser/:username" component={EditUser}/>
        <Route path="/createuser/:type" component={EditUser}/>
        <Route path="/listusers" component={ListUsers}/> 
</Switch>

Компонент ListUsers показывает таблицу с разбиением на страницы, где у каждого компонента в таблице есть ссылка, указывающая на /edituser/:username.

Я могу редактировать пользователей, нажимая на элемент в таблице, но, как и ожидалось, с реакцией, как только я вернусь к listusers/, компонент загружается снова, и я буду на первой странице пользователей.Я хочу быть на странице, с которой я получил доступ к пользователю в первую очередь.

Каков наилучший шаблон для достижения этой цели?Я думал о том, чтобы передать номер страницы на /edituser, а затем обратно на /listuser, но опять же мне нужно снова загрузить все разбитые на страницы результаты.Является ли локальное хранилище единственным вариантом?Любые указатели очень ценятся.

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

Есть два решения для вашей проблемы:

1) Передайте параметр маршрута для последней активной страницы и соответственно настройте пагинацию.

<Switch>
        <Route path="/edituser/:username" component={EditUser}/>
        <Route path="/createuser/:type" component={EditUser}/>
        <Route path="/listusers/:pageNumber" component={ListUsers}/> 
</Switch>

на вашем componentDidMount вы можете использовать егоустановить состояние.Например:

const pageNumber = this.props.match.params.pageNumber;

2) Передайте state реквизит в вашем маршруте.Например:

<Link 
    to={{ 
    pathname: '/listusers', 
    state: { pageNumber: 1 } 
  }}/>

на вашем componentDidMount вы можете использовать его для установки состояния.Например:

const pageNumber = this.props.location.state.pageNumber;

0 голосов
/ 02 октября 2018

Вы можете добавить номер страницы к URL в конечной точке /listusers.Может быть, что-то вроде /listusers/2 или /listusers?page=2 таким образом, когда вы нажимаете кнопку назад браузера, вы попадаете прямо туда.Последнее, что вы можете сделать, но я бы не советовал в этом случае сохранять номер страницы в состоянии истории.

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

Если вы действительно хотите сохранить данные в памяти, вы всегда можете использовать хранилище, которое находится в более высоком компоненте (например, корневой компонент), и сохранить предыдущий запрос там.Однако вам нужно быть осторожным с множеством проблем маршрутизации в таких случаях:

  • аннулирование кэша: данные меняются на стороне сервера за это время
  • пользователь каким-то образом получаетвернуться на страницу с другим номером таблицы
  • пользователь загружает браузер back кнопка
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...