带React路由器的按钮导航

你的问题是 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 Route . 您已经完成了此操作,但需要像这样定义路径:

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

路线 ,您的 Header 组件和任何 的需要嵌套在 BrowserRouter .

与 react-router-dom <Link /> 组件。使按钮成为链接的一种方法是将按钮包装为 <链接/> 反应路由器dom 图书馆。但是,在使用material ui时,可以使用 component 属性将按钮转换为链接。这样您就可以指定 to

<div className="header-right">
  <Button to="/hatspage" component={Link}> Sign In</Button>
  <Button> Contact</Button>
</div>

这个按钮将转到 /hatspage <HatsPage /> 组成部分:

<Router>
  <Switch>
    <Route path="/hatspage" component={HatsPage} exact />
  </Switch>
</Router>

参见示例 here

由于您的按钮是登录按钮,我猜您只希望已登录的用户能够使用 /海雀 conditional/private routing 首先检查用户是否已登录。还有一些节点模块可以帮助您完成此任务,例如 react-private-route