Кнопочная навигация с React Router - PullRequest
Новая
       79

Кнопочная навигация с React Router

0 голосов
/ 02 февраля 2020

Заголовок: я пытаюсь перейти на новую страницу из моего пользовательского интерфейса материала, используя метод onClick. Я не понимаю, что писать в моей функции handleClickSignIn.

Фрагмент кода из моего файла Header.tsx: 

const HatsPage = () => (
  <div>
    <h1>
      HATS PAGEHH
    </h1>
  </div>
)

function handleClickSignIn() {
  <Route component= {HatsPage}></Route>
}

const Header = () => (
  <div className = 'header'>‚
    <h1 className = 'title'>
      Instaride
    </h1>
    <div className="header-right">
      <Button onClick= {handleClickSignIn}> Sign In</Button>
      <Button> Contact</Button>
    </div>
  </div>
);

Это не работает, и я получаю сообщения об ошибках типа:

ожидаемое назначение или функция, но вместо этого получено выражение

1 Ответ

1 голос
/ 02 февраля 2020

Проблема в том, что вы генерируете компонент Route каждый раз, когда нажимаете кнопку Sign In.

Вместо этого вы должны использовать компонент Link, например, так: 

const Header = () => (
  <div className = 'header'>‚
  <h1 className = 'title'>
    Instaride</h1>
  <div className="header-right">
    <Link to={"/login"}> Sign In</Link>
    <Button> Contact</Button>
  </div>
</div>

Это создаст компонент ссылки, который при нажатии будет перенаправлять на /login URL. Чтобы затем визуализировать компоненты по этому URL, вам также необходимо определить Route. Вы уже сделали это с помощью, но вам нужно определить путь следующим образом: 

<Route path={"/login"} component={HatsPage} />

И затем обратите внимание, что этот Route, ваш Header компонент и любые Link должны быть вложенными в экземпляре BrowserRouter.

...