时间戳

首页 > 解决方案 > 使用 React Router 进行按钮导航

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

问题描述

页眉：我正在尝试使用 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>
);

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

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

标签： javascriptreactjsreact-nativereact-routermaterial-ui

解决方案

您遇到的问题是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>

这将创建一个链接组件，单击该链接组件将指向/loginURL。然后，要在该 URL 处呈现组件，您还需要定义一个Route. 您已经这样做了，但需要像这样定义路径：

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

然后请注意Route，您的Header组件和任何组件都Link需要嵌套在 a 的实例中BrowserRouter。

推荐阅读