react button onClick redirect page

Question

I am working on web application using React and bootstrap  When it comes to applying button onClick  it takes me hard time to let my page being redirect to another   if after  a href   I cannot go the another page    So would you please tell me is there any need for using react-navigation or other to navigate the page using Button onClick     import React    Component   from  react   import   Button  Card  CardBody  CardGroup  Col  Container  Input  InputGroup  InputGroupAddon  InputGroupText  Row  NavLink    from  reactstrap    class LoginLayout extends Component      render         return     lt div className  app flex-row align-items-center  gt           lt Container gt                                lt Row gt                         lt Col xs  6  gt                                                 lt Button color  primary  className  px-4  gt                              Login                           lt  Button gt                         lt  Col gt                         lt Col xs  6  className  text-right  gt                           lt Button color  link  className  px-0  gt Forgot password  lt  Button gt                         lt  Col gt                       lt  Row gt                              lt  Container gt         lt  div gt

User · Answer

useHistory   from react-router-dom can fix your problem  import React from  react   import   useHistory   from  react-router-dom   function NavigationDemo       const history   useHistory      const navigateTo        gt  history push   componentURL     eg history push   login       return       lt div gt      lt button onClick  navigateTo  type  button    gt      lt  div gt         export default NavigationDemo

User · Answer

if you want to redirect to a route on a Click event  Just do this In Functional Component props history push   link    In Class Component this props history push   link     Example   lt button onClick      gt  props history push   link      gt Press lt  button gt   Tested on  react-router-dom  5 2 0  react  16 12 0

User · Answer

First  import it   import   useHistory   from  react-router-dom     Then  in function or class   const history   useHistory      Finally  you put it in the onClick function    lt Button onClick      gt  history push   mypage    gt Click me  lt  Button gt

User · Answer

React Router v5 1 2   import   useHistory   from  react-router-dom   const App        gt       const history   useHistory       lt i className  icon list arrow left        onClick       gt            history goBack         gt  lt  i gt

User · Answer

This can be done very simply  you don t need to use a different function or library for it   onClick  event   gt   window location href   your-href

User · Answer

Don t use a button as a link  Instead  use a link styled as a button    lt Link to   signup  className  btn btn-primary  gt Sign up lt  Link gt

User · Answer

A simple click handler on the button  and setting window location hash will do the trick  assuming that your destination is also within the app   You can listen to the hashchange event on window  parse the URL you get  call this setState    and you have your own simple router  no library needed   class LoginLayout extends Component       constuctor           this handlePageChange   this handlePageChange bind this         this handleRouteChange   this handleRouteChange bind this         this state     page number  0            handlePageChange         window location hash      my target url          handleRouteChange event        const destination   event newURL         check the URL string  or whatever other condition  to determine        how to set internal state      if  some condition          this setState   page number  1                  componentDidMount         window addEventListener  hashchange   this handleRouteChange  false          render             TODO  check this state page number and render the correct page      return          lt div className  app flex-row align-items-center  gt           lt Container gt                                 lt Row gt                     lt Col xs  6  gt                                             lt Button                         color  primary                         className  px-4                         onClick  this handlePageChange                       gt                          Login                       lt  Button gt                     lt  Col gt                     lt Col xs  6  className  text-right  gt                       lt Button color  link  className  px-0  gt Forgot password  lt  Button gt                     lt  Col gt                   lt  Row gt                          lt  Container gt         lt  div gt

User · Answer

update   React Router v5 with hooks   import React from  react   import   useHistory   from  react-router-dom   function LoginLayout        const history   useHistory       const routeChange        gt        let path    newPath        history push path          return          lt div className  app flex-row align-items-center  gt           lt Container gt                           lt Row gt               lt Col xs  6  gt                                       lt Button color  primary  className  px-4                  onClick  routeChange                     gt                    Login                  lt  Button gt               lt  Col gt               lt Col xs  6  className  text-right  gt                 lt Button color  link  className  px-0  gt Forgot password  lt  Button gt               lt  Col gt             lt  Row gt                         lt  Container gt         lt  div gt         export default LoginLayout    with React Router v5   import   useHistory   from  react-router-dom   import   Button  Card  CardBody  CardGroup  Col  Container  Input  InputGroup  InputGroupAddon  InputGroupText  Row  NavLink    from  reactstrap    class LoginLayout extends Component      routeChange     gt        let path    newPath       let history   useHistory        history push path          render         return          lt div className  app flex-row align-items-center  gt           lt Container gt                           lt Row gt               lt Col xs  6  gt                                       lt Button color  primary  className  px-4                  onClick  this routeChange                     gt                    Login                  lt  Button gt               lt  Col gt               lt Col xs  6  className  text-right  gt                 lt Button color  link  className  px-0  gt Forgot password  lt  Button gt               lt  Col gt             lt  Row gt                         lt  Container gt         lt  div gt                export default LoginLayout    with React Router v4   import   withRouter   from  react-router-dom   import   Button  Card  CardBody  CardGroup  Col  Container  Input  InputGroup  InputGroupAddon  InputGroupText  Row  NavLink    from  reactstrap    class LoginLayout extends Component     constuctor         this routeChange   this routeChange bind this          routeChange         let path    newPath       this props history push path          render         return          lt div className  app flex-row align-items-center  gt           lt Container gt                           lt Row gt               lt Col xs  6  gt                                       lt Button color  primary  className  px-4                  onClick  this routeChange                     gt                    Login                  lt  Button gt               lt  Col gt               lt Col xs  6  className  text-right  gt                 lt Button color  link  className  px-0  gt Forgot password  lt  Button gt               lt  Col gt             lt  Row gt                         lt  Container gt         lt  div gt                export default withRouter LoginLayout

User · Answer

I was also having the trouble to route to a different view using navlink    My implementation was as follows  and works perfectly    lt NavLink tag  li  gt     lt div     onClick       gt        this props history push   admin my- settings            gt       lt DropdownItem className  nav-item  gt        Settings      lt  DropdownItem gt     lt  div gt   lt  NavLink gt    Wrap it with a div  assign the onClick handler to the div  Use the history object to push a new view

User · Answer

A very simple way to do this is by the following   onClick  this fun bind this     and for the function   fun       this props history push   Home        finlay you need to import withRouter   import   withRouter   from  react-router-dom     and export it as   export default withRouter  comp name

User · Answer

If all above methods fails use something like this      import React    Component   from  react       import   Redirect   from  quot react-router quot            export default class Reedirect extends Component           state                 redirect  false                   redirectHandler        gt                this setState   redirect  true                this renderRedirect                      renderRedirect        gt                if  this state redirect                    return  lt Redirect to       gt                                  render                 return                    lt  gt                       lt button onClick  this redirectHandler  gt click me lt  button gt                       this renderRedirect                     lt   gt

User · Answer

With React Router v5 1   import  useHistory  from  react-router-dom   import React   Component  from  react   import  Button  from  reactstrap               export class yourComponent extends Component                 componentDidMount              let history   useHistory                             render             return                                           lt Button className  fooBarClass  onClick       gt  history back    gt Back lt  Button gt

User · Answer

I was trying to find a way with Redirect but failed  Redirecting onClick is simpler than we think  Just place the following basic JavaScript within your onClick function  no monkey business   window location href  pagelink

[javascript] react button onClick redirect page

Examples related to javascript

Examples related to reactjs

Examples related to bootstrap-4