单击按钮时使用 React 导航到新页面

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

Answer 2

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.