How to navigate from one component to another by clicking a button using React router

Question

I want to use react-router-dom to navigate my website.
Every component will render <button> whenever onClick will active the switch to the next component.

Main component Login.js will contain all the 4 components inside it. I need to know what are the ways to do it.
(The first time user must not skip the login process below anyhow)

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from 'react-router-dom';
        import MobileNum from './MobileNum.jsx';
        import IdNumber from './IdNum.jsx';
        import userEmail from './userEmail';
        import CreatePass from './createPassword .jsx';

        class Login extends Component {
       render() {
        return (
          <div>
           <button  onClick={}></button>
          </div>
        );
      }
     }

@Apostolos This is the first screen the user will have if he hasn't sign up yet. — ExtraSun
– ExtraSun, Commented Jun 30, 2021 at 13:45
do you really need routers? i guess a show/hide based on step would be enough — Apostolos
– Apostolos, Commented Jun 30, 2021 at 13:46
@Apostolos First it must be secured, second what is 'based on step' ? I rather navigate with router. — ExtraSun
– ExtraSun, Commented Jun 30, 2021 at 13:59

Justin · Accepted Answer · 2021-06-30 15:50:47Z

1

To redirect the user you want to call push on the history object. To get the history object in a class component you can use the withRouter higher-order component, e.g.

class Login extends Component {
  render() {
    const { history } = this.props;

    return (
      <div>
       <button onClick={() => history.push('foo')}>Login</button>
      </div>
    );
  }
}

export const LoginWithRouter = withRouter(Login);

Source: https://dev.to/kozakrisz/react-router---how-to-pass-history-object-to-a-component-3l0j

answered Jun 30, 2021 at 15:50

Justin

87.3k49 gold badges231 silver badges374 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ExtraSun Over a year ago

Hi Justin and thanks. I want to push a <component> not an address of a component, the user must not be able to echange the url manually in the address bar.

Linda Paiste Over a year ago

“I want to push a <component> not an address of a component” that’s just not how react-router works. You need to configure your <Route/>s to load the correct content for each page based on the URL address. Then you navigate with react-router by changing the URL.

Collectives™ on Stack Overflow

How to navigate from one component to another by clicking a button using React router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related