Динамические ссылки с Navbar и LinkContainer - PullRequest
Новая
       43

Динамические ссылки с Navbar и LinkContainer

0 голосов
/ 11 октября 2019

У меня есть вопрос об использовании Navbar с LinkContainer.

В настоящее время я работаю над проектом реагирующего веб-сайта и использую реагирующий загрузчик для создания хорошего Navbar. Пользователь может войти на веб-сайт, и после входа сервер, подключенный к AWS, отправляется и получает некоторую информацию об этом пользователе (более конкретно, символы пользователя). Эта информация должна быть частью Navbar как элементы раскрывающегося списка. Моя проблема в том, что, поскольку я использую LinkContainer, сам Navbar не выполняет повторную визуализацию, когда пользователь вошел в систему, поэтому он не обновляет себя необходимыми данными. Как только пользователь обновляет страницу, информация появляется, но ему нужно обновить ..

Моя проблема не совпадает с ссылками «скрыть» и «показать» на панели навигации!

До того, как пользователь войдет в систему, у меня нет информации о пользовательских данных (символах), поэтому я не могу скрыть ссылки, основанные на состоянии авторизации пользователей.

Одно из имеющихся у меня решенийэто просто использовать window.location.reload(); после того, как пользователь вошел в систему, но выглядит плохо, что вся страница обновляется, и мне было интересно, есть ли более элегантный способ решения этой проблемы.

Теперь для интересной части, код: Вот небольшая сводка моего кода Navbar (самая важная часть - функция в середине этого): 

<Navbar bg="#212121" expand="lg" variant="dark">
  <LinkContainer to="/">
    <Navbar.Brand>Main</Navbar.Brand>
   </LinkContainer>
   <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav">
       <Nav className="mr-auto">
         <LinkContainer to="/info">
            <Nav.Link>information</Nav.Link>
         </LinkContainer>
         <NavDropdown title="My Characters" id="basic-nav-dropdown">
            {add_characters_list()}
         </NavDropdown>
       </Nav>
     </Navbar.Collapse>
 </Navbar>

Так чтоздесь происходит то, что у меня есть функция, а именно add_characters_list(), которая возвращает выпадающий элемент для каждого символа, который есть у пользователя. Работает нормально, но опять же, только когда обновляется весь Навбар. Вот функция: 

  function add_characters_list() {
    return [{}].concat(characters).map(
      (characters, i) =>
        i !== 0
          ?
          <NavDropdown.Item>
            <LinkContainer to={`/characters/${characters.charid}`}>
             <p className="testing">{characters.char_name}</p>
            </LinkContainer>
          </NavDropdown.Item>
          : null
    );
  }

Я знаю, что проблема в том, что я использую LinkContainer, который делает рендеринг «вне» Navbar, но мне было интересно, есть ли лучший способ сделать это? Это. Я перечитывал все, но не смог найти более элегантного решения, чем упомянутое ранее.

Извините за длинный пост, и спасибо за вашу помощь!

Редактировать: На этот вопрос еще не ответили, поэтому вместо того, чтобы публиковать новый, я отредактирую этот вопрос с более подробной информацией .. Еще раз спасибо

1 Ответ

0 голосов
/ 11 октября 2019

вам нужно, чтобы ваш Navbar был связан с состоянием пользователя. Auth.

см. Это: Как скрыть панель навигации на странице входа и регистрации в реакции?

...