Reputation: 1286
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
Upvotes: 0
Views: 2798
Reputation: 88
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.
Upvotes: 1
Reputation: 294
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>
);
}
Upvotes: 1