使用 React Router 进行按钮导航

Question

页眉：我正在尝试使用 onClick 方法从 Material UI 按钮导航到新页面。我对在我的 handleClickSignIn 函数中写什么感到困惑。

我的 Header.tsx 文件中的代码 sn-p：

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>
);

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

预期的赋值或函数，但得到了表达式

Answer 1

您遇到的问题是每次单击Sign In 按钮时都会生成一个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 的实例中。