Navigation between components with React Router

Question

Good morning! I'm kind new in this whole {react, redux, routers} kind thing. Right now i'm stuck on the navigation between my components.

I'm already developed my routes (index.js on scr/routes):

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

And put them here (layout.js on src/containers):

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

If i manually change the URL it's possible to navegate between pages, on the others words: My routes are functional.

But, on my Sidemenu component how can i put a Onclick function that's actually change the route, since "this.props.history.push('/somepath')" does not work inside a other component that's not the original in this example?

Here's my sidemenu component (sidemenu.js on src/components):

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

Thanks for help, and if is require some more code or examples, please let me know.

Answer 1

react-router provides a <Link> and a <Redirect> component do dynamically change the location. There is usually no need to manipulate it yourself.

Read the documentation for details.