Adding para "id" in react.js url - mysql

Question

I wanted to add my currentUser.id at the back of http://localhost:8081/profileand look something like this http://localhost:8081/profile/1. I am using node.js and MySQL as the backend database. But I cannot seem it get it to work by using router "/profile/:id". I am able to display database information in the profile but did not manage to add id into the URL link. what I am doing wrong?
import React from 'react';
import "./App.css"
import Navbar from './components/Navbar';
import { Switch, Route} from 'react-router';
import { BrowserRouter } from 'react-router-dom'
import Home from './components/pages/HomePage/Home'
import Footer from './components/pages/Footer/Footer';
import Service from './components/Service';
import Info from './components/pages/Info/Info';
import infoMs from './components/pages/Info/infoMs';
import DVC from './components/pages/Info/DVC';
import ike from './components/pages/Info/ike';
import Login from './components/Login';
import Register from './components/Register';
import Profile from './components/Profile';
import About from './components/aboutUs/about';
import facilities from './components/facilities';
import research from './components/research';
import computing from './components/computing';
import alumni from './components/Alumni';
import compstu from './components/studys/compstu';
import useng from './components/studys/useng';
import master from './components/studys/master';
import DnM from './components/DnM';
function App()
{
return(
<BrowserRouter>
<Navbar />
<Switch>
<Route exact path={["/", "/home"]} component={Home}/>
<Route path='/service' component={Service}/>
<Route path='/phua' component={Info}/>
<Route path='/foong' component={infoMs}/>
<Route exact path='/login' component={Login}/>
<Route exact path="/register" component={Register} />
<Route path="/profile" component={Profile} />
<Route exact path="/about" component={About} />
<Route exact path="/fac" component={facilities} />
<Route exact path="/research" component={research} />
<Route exact path="/computing" component={computing} />
<Route exact path="/alumni" component={alumni} />
<Route exact path="/compstu" component={compstu} />
<Route exact path="/useng" component={useng} />
<Route exact path="/master" component={master} />
<Route path="/dvc" component={DVC} />
<Route path="/ike" component={ike} />
<Route path="/DnM" component={DnM} />
</Switch>
<Footer />
</BrowserRouter>
);
}
export default App;
this is my navbar
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { FaBars, FaTimes } from 'react-icons/fa'
import { Button } from './Button'
import './Navbar.css'
import { IconContext } from 'react-icons/lib'
import AuthService from "../services/auth-service";
import Dropdown from './Dropdown';
import {
BsFillCaretDownFill,
} from 'react-icons/bs';
export const img1 = require('./images/kdu.png');
function Navbar() {
const [currentUser, setCurrentUser] = useState(undefined);
useEffect(() => {
const user = AuthService.getCurrentUser();
if (user) {
setCurrentUser(user);
}
}, []);
const logOut = () => {
AuthService.logout();
setCurrentUser(undefined);
};
const [click, setClick] = useState(false);
const [button, setButton] = useState(true);
const [dropdown, setDropdown] = useState(false);
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false)
const showButton = () => {
if (window.innerWidth <= 960) {
setButton(false)
} else {
setButton(true)
}
};
useEffect(() => {
showButton();
}, []);
const onMouseEnter = () => {
if (window.innerWidth < 960) {
setDropdown(false);
} else {
setDropdown(true);
}
};
const onMouseLeave = () => {
if (window.innerWidth < 960) {
setDropdown(false);
} else {
setDropdown(false);
}
};
window.addEventListener('resize', showButton);
return (
<>
<IconContext.Provider value={{ color: "#fff" }}>
<nav className='navbar'>
<div className='navbar-container container'>
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
<img src="/images/Logo-WHITE.png"
alt="UOWKDU Logo" width="35%" height="85%" className='navbar-icon' />
</Link>
<div className='menu-icon' onClick={handleClick}>
{click ? <FaTimes /> : <FaBars />}
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className='nav-item'>
<Link to='/computing' className='nav-links' onClick={closeMobileMenu}>
Study
</Link>
</li>
<li className='nav-item' >
<Link
to='/service'
className='nav-links'
onClick={closeMobileMenu}
>
Staff
</Link>
</li>
<li className='nav-item' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<Link
className='nav-links'
onClick={closeMobileMenu}
>
About Us <BsFillCaretDownFill />
</Link>
{dropdown && <Dropdown />}
</li>
{currentUser ? (
<li className='nav-btn'>
<Link to='/login' className='btn-link' onClick={logOut}>
<Button buttonStyle='btn--outline' >LogOut</Button>
</Link>
</li>
) : (
<li className="nav-btn">
<Link to='/login' className='btn-link' >
<Button buttonStyle='btn--outline' >Login</Button>
</Link>
</li>
)}
{currentUser ? (
<li className="nav-btn">
<Link to={'/profile' } className='btn-link' >
<Button buttonStyle='btn--outline' >{currentUser.username}</Button>
</Link>
</li>
) : (
<li className="nav-btn">
<Link to='/register' className='btn-link'>
<Button buttonStyle='btn--outline' >Register</Button>
</Link>
</li>
)}
<Link
className='social-icon-link'
to={
'//www.uowmkdu.edu.my/ug-virtual-tour/'
}
target='_blank'
aria-label='GoogleMapKDU'
><Button buttonStyle='btn--outline'>Tour</Button></Link>
</ul>
</div>
</nav>
</IconContext.Provider>
</>
)
}
export default Navbar

Answer 1

Change
<Link to={'/profile' } className='btn-link' >
to
<Link to={`/profile/${currentUser.id}` } className='btn-link' >