how to go to a specific profile after login?

Hey I am trying to build a simple Login and Profile seeing app. Where you can Register and Login and after that it will take you to your Profile where whatever you wrote in the Registration will show. But i am stuck, I need this for my internship plase anyone help me?? Below I am posting API and front end code.

server.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const userRouter = require('./routes/user.route');
const loginRouter = require('./routes/login.route');
require('dotenv').config();

const app = express();
const port = process.env.PORT || 5000;
app.use(express.json());
app.use(cors());

const uri = process.env.ATLAS_URI;
mongoose
    .connect(uri, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useCreateIndex: true,
    })
    .then((res) =>
        console.log('MongoDb connected .....')
    )
    .catch((err) => console.log(err));

app.use('/users', userRouter);
app.use('/login', loginRouter);

app.listen(port, () => {
    console.log(`App is running on port ${port}`);
});

user.route.js

const express = require('express');
const Router = express.Router();
const User = require('../models/user.model');

Router.route('/').get((req, res) => {
    User.find()
        .then((response) => res.json(response))
        .catch((err) =>
            res.status(400).json('Error: ' + err)
        );
});

Router.route('/add').post((req, res) => {
    const {
        firstname,
        lastname,
        email,
        contact,
        password,
    } = req.body;

    const newUser = new User({
        firstname,
        lastname,
        email,
        contact,
        password,
    });

    newUser
        .save()
        .then((response) => res.json(response))
        .catch((err) =>
            res.status(400).json('Error: ' + err)
        );
});
Router.route('/:id').get((req, res) => {
    User.findById(req.params.id)
        .then((response) => res.json(response))
        .catch((err) => res.json(err));
});

module.exports = Router;

login.route.js

const express = require('express');
const Router = express.Router();
const User = require('../models/user.model');

Router.route('/').post((req, res) => {
    User.findOne({ email: req.body.email })
        .then((user) => {
            if (user) {
                if (req.body.password === user.password) {
                    return res.json(user);
                } else {
                    return res.json('wrong password');
                }
            } else {
                return res.json('User not found');
            }
        })
        .catch((err) => res.json('Error: ' + err));
});

module.exports = Router;

Front End app.js

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Route } from 'react-router';
import Login from './components/login';
import Signup from './components/signup';
import Profile from './components/profile';

export default class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route
                        path='/'
                        exact
                        component={Login}
                    />
                    <Route
                        path='/signup'
                        exact
                        component={Signup}
                    />
                    <Route
                        path='/users/:id'
                        component={Profile}
                    />
                </div>
            </BrowserRouter>
        );
    }
}

login.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

export default class Login extends Component {
    constructor() {
        super();
        this.state = {
            email: '',
            password: '',
        };
    }

    onChangeEmail = (event) => {
        this.setState({
            email: event.target.value,
        });
    };
    onChangePassword = (event) => {
        this.setState({
            password: event.target.value,
        });
    };

    handleSubmit = (event) => {
        event.preventDefault();

        const newLogin = {
            email: this.state.email,
            password: this.state.password,
        };
        axios
            .post(
                'http://localhost:5000/login',
                newLogin
            )
            .then((res) => {
                window.location =
                    '/users/' + res.data._id;
            })
            .catch((err) => console.log(err));
        this.setState({
            email: '',
            password: '',
        });
    };

    render() {
        return (
            <div
                className='container'
                style=>
                <div style=>
                    <form onSubmit={this.handleSubmit}>
                        <div className='mb-3'>
                            <label
                                htmlFor='Email'
                                className='form-label'>
                                Email address
                            </label>
                            <input
                                value={this.state.email}
                                onChange={this.onChangeEmail}
                                type='email'
                                className='form-control'
                                id='Email'
                                aria-describedby='emailHelp'
                            />
                            <div
                                id='emailHelp'
                                className='form-text'>
                                We'll never share your email with
                                anyone else.
                            </div>
                        </div>
                        <div className='mb-3'>
                            <label
                                htmlFor='Password'
                                className='form-label'>
                                Password
                            </label>
                            <input
                                value={this.state.password}
                                onChange={this.onChangePassword}
                                type='password'
                                className='form-control'
                                id='Password'
                            />
                        </div>
                        <div>
                            {`Dont have an account? Click `}
                            <Link to='/signup'>Here</Link>
                        </div>
                        <button
                            type='submit'
                            className='btn btn-primary'>
                            Submit
                        </button>
                    </form>
                </div>
            </div>
        );
    }
}

profile.js

import axios from 'axios';
import React, { Component } from 'react';

export default class Profile extends Component {
    constructor() {
        super();
        this.state = {
            Name: '',
            LastName: '',
            email: '',
        };
    }

    componentDidMount() {
        axios
            .get('http://localhost:5000/users/')
            .then((res) => console.log(res.data))
            .catch((err) => console.log(err));
    }
    render() {
        return (
            <div>
                <h1>Name</h1>
                <h3>LastName</h3>
                <p>email</p>
            </div>
        );
    }
}

from Recent Questions - Stack Overflow https://ift.tt/3rBkG3V
https://ift.tt/eA8V8J