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

Answer 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.

Answer 2

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