Как передавать данные пользователя из хранилища в React + React Router?

Question

[Daniil]

Доброе утро. Есть такой вопрос. Предположил, у нас есть хранилище пользователей (замечу, без бэка и соответственно без БД). Например userStorage.js :

const users = [
  {
    id: 1,
    name: 'Every Interaction',
    username: 'EveryInteract',
  },
  {
    id: 2,
    name: 'AppleInsider',
    username: 'appleinsider',
  },
];

И есть App.js, в котором мы и начинаем нашу работу:

...
import users from './userStorage';
...
 <BrowserRouter>
      <React.Fragment>
        <Nav />
        <Switch>
          <Route path="/:user" component={Profile} />
          <Redirect exact from="/" to="/EveryInteract" />
        </Switch>
      </React.Fragment>
    </BrowserRouter>

Я не совсем понимаю, как мне правильно проводить проверку и передавать нужные данные пользователя? (В нашем случае, сейчас только username и name).
То есть, человек нажал или вбил в урл имя профиля, например .../EveryInteract, и как нам проверить и достать нужные данные из нашего хранилища и передать в Profile?
Как - то с помощью тернарника на проверку урла? { location.href === users.id ? ... } и потом

<Route path="/:user" render={() => <Profile prop1 prop2 />} /> ?

Подскажите пожалуйста, как же правильно

Answer 1

[Максим]

(если react-router версии 4)
У вас в this.props.match.params.user будет то, что человек вбил после / для роута:
<Route path="/:user" component={Profile} />

Следовательно, в componentDidMount комопонента Profile если нужно "эмулировать" загрузку данных, через setTiemout или просто прямо в render компонента, вы можете этим ( this.props.match.params.user ) значением пользоваться и все.

Как вы будете доставать объект юзера из массива с данными, дело ваше. Можно поиском по массиву, можно сделать метод в том же файле и его экспортировать, например:

export function findUserById(id) => {
  // ищем по id элемент в массиве и возвращаем его
}

Comments

[Daniil]

Как вы будете доставать объект юзера из массива с данными, дело ваше. Можно поиском по массиву, можно сделать метод в том же файле и его экспортировать, например:

За id Вы принимаете же match.params.user?

[Максим]

TchernyavskD, конечно