mysql - 在 react.js url 中添加 para“id”

问题描述

我想currentUser.id在后面加上我的http://localhost:8081/profile，看起来像这样http://localhost:8081/profile/1。我使用 node.js 和 MySQL 作为后端数据库。但我似乎无法通过使用 router 让它工作 "/profile/:id"。我能够在配置文件中显示数据库信息，但没有设法将 id 添加到 URL 链接中。我做错了什么？

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;

这是我的导航栏

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

标签： mysqlnode.jsreactjs

mysql - 在 react.js url 中添加 para“id”

问题描述

解决方案

推荐阅读