Question

早上好！在这整个{react，redux，routers}这件事情中，我是个新人。现在我仍然坚持我的组件之间的导航。

我已经开发了我的路线（scr / routes上的index.js）：

export default function() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/' exact render={props => <Home {...props}/>} />
        ...
      </Switch>
    </BrowserRouter>
  )
}

并将它们放在这里（在src / containers上的layout.js）：

export class App extends React.Component {
...
    return (
      <Layout className="main-layout">
        <Sider className='sider'>
          ...
         <SideMenu/> //This is the component that i'm click for change the "pages"
        </Sider>
        <Layout>
          <Header className="app-header">
            ...
          </Header>         

              <Routes/>

        </Layout>
      </Layout>
    )        
  }
}

如果我手动更改URL，可以在页面之间进行navegate，而在其他单词上：我的路线功能正常。

但是，在我的Sidemenu组件上，我如何设置一个实际上改变路线的Onclick功能，因为＆＃34; this.props.history.push（＆＃39; / somepath＆＃39;）＆＃34;在本例中不是原作的其他组件内部不起作用？

这是我的sidemenu组件（src / components上的sidemenu.js）：

export class SideMenu extends React.Component {

  handleClick(e){
    switch(e.key){
      case '1':
          console.log('Home')          
          break;
      case '2.1':
          console.log('Cadastro de grupo')
          break;
      case '2.2':
          console.log('Cadastro de Produto')
          break; 
      case '2.3':
          console.log('Cadastro de Estação')
          break;
      case '2.4':
          console.log('Cadastro de Usuário')
          break; 
      case '2.5':
          console.log('Pagamento')
          break;   
      default:
          console.log('Click não associado')
    }
  }

  render() {

    return (
        <Menu
          onClick={this.handleClick}
          mode="vertical"
          theme="light"
          className="side-menu"
        >
          <Menu.Item className="text-black" key="1">
            <Icon id='dark' type="home" />
            <span>Inicio</span>
          </Menu.Item>

          <SubMenu className="text-black"/><span>Cadastros</span></span>}>
            <Menu.Item className="text-black" key="2.1">Grupo</Menu.Item>
            <Menu.Item className="text-black" key="2.2">Produto</Menu.Item>
            <Menu.Item className="text-black" key="2.3">Estação</Menu.Item>
            <Menu.Item className="text-black" key="2.4">Usuário</Menu.Item>
            <Menu.Item className="text-black" key="2.5">Pagamento</Menu.Item>
          </SubMenu>
         ...
        </Menu>            
    )
  }
}

感谢您的帮助，如果需要更多代码或示例，请告知我们。

Answer 1

react-router提供<Link>和<Redirect>组件动态更改位置。通常没有必要自己操纵它。

阅读documentation了解详情。

使用React Router在组件之间导航

1 个答案: