Navigate to a new page with React when I click on a button

Question

I want to navigate from welcome page to the login page, I created the 2 pages and now I want to navigate to the login page when I click on the Login button.

Here is the welcome page code:

import React from 'react';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box'

const useStyles = makeStyles({
    logo: {
        width: '120px',
        height: '120px',
    },
    loginButton: {
        right: '50px',
    }
});

export default function Welcome() {
const classes = useStyles()
return (
        <div>
        <Box style={{ width: '100%' }} display="flex" justifyContent="center" alignItems="center" >

            <Box flexGrow={1}>
            <img src={require('../logo.svg')} className={classes.logo} />
            </Box>

            <Box>
            <Button variant="contained" color="primary" className={classes.loginButton}>
                Login
            </Button>
            </Box>

        </Box>
</div>

And here is the Login component ( not yet finished ):

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles((theme) => ({
    root: {
      '& > *': {
        margin: theme.spacing(1),
        width: '25ch',
      },
    },
  }));

export default function Login() {
    const classes = useStyles();
    return (
        <div>
            <TextField id="email" label="Enter email" />
            <TextField id="password" label="Enter password" />
        </div>
    )
}

PS: I'm using react material ui library

What is the problem you are facing ? React router is easy to use I guess. — gautamits
– gautamits, Commented May 1, 2020 at 15:54
How can I move to the login page in this case, can you suggest a solution ? — Ala Ben Aicha
– Ala Ben Aicha, Commented May 1, 2020 at 15:57
<Router> <Route path="/login" component={Login}> <Button variant="contained" color="primary" className={classes.loginButton}> Login </Button> </Route></Router> — Ala Ben Aicha
– Ala Ben Aicha, Commented May 1, 2020 at 16:01

Anurag Yadav · Accepted Answer · 2020-05-01 16:04:04Z

1

You are doing great, and also you have written your Welcome and Login, React functional components very well.

To navigate programmatically to another page you have to use history object provided by React Router DOM. And create a function that is can be executed using any button onClick method.

import { useHistory } from 'react-router-dom';


export default function Login() {

   const classes = useStyles();
   const loginHandler(){
       // handle your login logic
       history.push('/help'); // use either relative or absolute path both will work,navigate to help page or wherever want to navigate
   };

   return (
       <div>
            <TextField id="email" label="Enter email" />
            <TextField id="password" label="Enter password" />
            <button onClick={loginHandler}>Login</button>
       </div>
   );
}

answered May 1, 2020 at 16:04

Anurag Yadav

2941 silver badge9 bronze badges

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

2 Comments

Ala Ben Aicha Over a year ago

The problem is not in the login component, it is not finished yet. I just want to navigate from the first page to the login page when I click on the Login button.

Anurag Yadav Over a year ago

@AlaBenAicha I didn't mention that, there is a problem with Login Component, try this it will work like butter. Just put your route path to history.push method argument.

Jack A · Accepted Answer · 2020-05-08 01:18:18Z

1

You were really close with your comment reply:

<Router> <Route path="/login" component={Login}> <Button variant="contained" color="primary" className={classes.loginButton}> Login </Button> </Route></Router>

The way that works for me is to make a router file with a constant that contains my routers. It would look like this:

Router.js

import React from "react";
import { Route } from "react-router-dom";
import Login from " *wherever your login is* ";
import Welcome from " *wherever your welcome is* ";

const Router = () => (
  <div>
    <Route exact path="/" component={Welcome} />
    <Route exact path="/login" component={Login} />
  </div>
);

export default Router;

You would then make the only thing in your App.js file the router:

App.js

import Router from " *where you put your router file* ";

class App extends Component {
  render() {
    return (
      <div>
         <Router>
            <Router />
         </Router>
      </div>
    );
  }
}

export default App;

Finally, you would make your button a link to the designated url in your router:

Welcome.js

import React from 'react';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box';
import { Link } from "react-router-dom"; 
//^this import is important

...

<Button component={Link} to='/login' variant="contained" color="primary" className={classes.loginButton}>
Login
</Button>

That should set you off. I'm kind of new to this as well so tell me if something is broken.

edited May 8, 2020 at 1:18

answered May 3, 2020 at 1:43

Jack A

886 bronze badges

2 Comments

Ala Ben Aicha Over a year ago

Thanks for your answer, but it's not working. When I click on the button it doesn't change the page. but now when I go to localhost/login it shows the Login page.

Jack A Over a year ago

Sorry about that, I am not familiar with Material ui syntax. I made a minor edit in welcome.js on the button component that should work for material.

Collectives™ on Stack Overflow

Navigate to a new page with React when I click on a button

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related