Перейдите на новую страницу с React, когда я нажимаю на кнопку

Question

Я хочу перейти со страницы приветствия на страницу входа, я создал 2 страницы и теперь я хочу перейти на страницу входа, когда нажимаю кнопку входа в систему.

Вот код страницы приветствия :

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>

А вот и компонент Login (еще не закончен):

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: я использую библиотеку пользовательского интерфейса реагирующих материалов

Answer 1

Вы были действительно близки с вашим комментарием:

<Router> <Route path="/login" component={Login}> <Button variant="contained" color="primary" className={classes.loginButton}> Login </Button> </Route></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;

Затем вы сделали бы единственное в своем приложении . js файл маршрутизатора:

Приложение. js

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

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

export default App;

Наконец, вы сделаете свою кнопку ссылкой на назначенный URL в вашем маршрутизаторе:

Добро пожаловать. 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>

Это должно вас расстроить. Я тоже новичок в этом, так что скажите мне, если что-то сломалось.

Answer 2

У вас все отлично, а также вы очень хорошо написали свои Welcome и Login, React functional components.

На navigate programmatically на другую страницу, вы должны использовать history предоставленный объект на React Router DOM. И создайте функцию, которая может быть выполнена любым методом onClick кнопки.

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