javascript - 使用 React Router 进行按钮导航

Question

标题:我正在尝试使用 onClick 方法从 Material UI 按钮导航到新页面。我对在 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>
);

这不起作用，我收到如下错误:

expected assignment or function but got expression instead

Answer 1

您遇到的问题是，每次单击登录按钮时都会生成Route组件。

相反，您应该使用 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 的实例中。