title: How do you pass URL param /:id from axios to express?
body: <p>React Beginner Here. I'm building a practice chat app and trying to pass a chat id from the URL to express. I don't know if I'm doing it right but the id gets set using navigate and when they get redirected, a useEffect is supposed to get the /:id and pass it to express using Axios and return the actual chat. However, for example I send something like /messages/chat/1, and pass it to express, all I get is &quot;/:id&quot; and not 1. Code below.</p>
  <p><strong>Idea:</strong> Maybe I can use the context API to store and pass it. Might try later</p>
  <p><strong>Update:</strong> I tried with context API. It worked but I think this is not the right way to do it lol</p>
  <p><strong>section.jsx</strong> - passes chatId to url and redirects
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {useState, useEffect, useContext} from 'react'
  import AuthContext from '../../../context/AuthProvide'
  import styles from './section.module.css'
  import {axios}  from '../../../context/axios'
  import { useLocation, useNavigate } from "react-router-dom"
  const ENTER_URI = '/enter_chat'
  
  const Section = (props) =&gt; {
    const { state } = useLocation();
      const navigate = useNavigate();
    const { user } = useContext(AuthContext)
  
    const [value, setValue] = useState(props.subjectId)
    function handleEnterChat(e) {
      e.preventDefault()
      axios.post(ENTER_URI, {
        user_section: user.user_section_id,
        subject_id: value
      }).then(res =&gt; {
        navigate(`/messages/chat/${res.data.chat_id}`)
      }).catch(err =&gt; {
  
      })
    }
    
    return (
      &lt;&gt;
          &lt;form className={styles.chatItem}&gt;
              &lt;button onClick={handleEnterChat} className={styles.enterChat}&gt;{props.subject}&lt;/button&gt;
          &lt;/form&gt;
      &lt;/&gt;
    )
  }
  
  export default Section</code></pre>
  </div>
  </div>
  </p>
  <p><strong>chat.jsx</strong> - useEffects to the backend and get data
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {useState, useEffect, useContext} from 'react'
  import AuthContext from '../../../context/AuthProvide'
  import { axios } from '../../../context/axios'
  const GET_CHAT_URI = '/messages/chat/:id'
  const _Chat = () =&gt; {
    const { user } = useContext(AuthContext)
  
    useEffect(() =&gt; {
      axios.get(GET_CHAT_URI, {}
        ).then(res =&gt; {
        alert('worked')
        console.log(res.data.chat)
      }).catch(err =&gt; {
        alert('error')
        console.log(err)
      })
    }, [])
    return (
      &lt;&gt;
          _Chat
      &lt;/&gt;
    )
  }
  
  export default _Chat</code></pre>
  </div>
  </div>
  </p>
  <p><strong>getChat.js</strong> - supposed to read the get
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const express = require('express')
  const router = express.Router()
  const jwt = require('jsonwebtoken')
  const cors = require('cors')
  const mysql = require('mysql')
  const connection = mysql.createConnection({
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: process.env.DB_DATABASE
  })
  
  router.use(cors({
      origin: ['http://localhost:3000', 'http://localhost:9000', 'http://localhost:3001'],
      credentials: true,
  }))
  router.use(express.urlencoded({extended: true}))
  router.use(express.json())
  
  router.get('/:id', (req, res) =&gt; {
      const chatId = req.params.id
      console.log(chatId);
      res.json({message: "Hello World"})
  })
  
  module.exports = router</code></pre>
  </div>
  </div>
  </p>
  <p><strong>server.js</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const express = require('express')
  const app = express()
  const http = require('http')
  const server = http.createServer(app)
  const cors = require('cors')
  app.use(cors({
      origin: ['http://localhost:3000', 'http://localhost:9000', 'http://localhost:3001'],
      credentials: true,
  }))
  app.use(express.json())
  app.use(express.urlencoded({extended: true}))
  
  ...
  const getChat = require('./routes/chat/getChat')
  
  ...
  app.use('/messages/chat/', getChat)
  
  const PORT = process.env.PORT || 9000 
  server.listen(PORT, () =&gt; {
      console.log(`Listening on http://localhost:${PORT}`)
  })</code></pre>
  </div>
  </div>
  </p>
  <p><strong>routing.jsx</strong> - may ve important</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
  
  import Messages from "../pages/messages/messages";
  import Chat from "../pages/messages/chat/chat";
  ...
  
  import ProtectedRoute from "../pages/Protected_Routes/protected";
  
  const Routing = () =&gt; {
      return (
          &lt;&gt;
              &lt;Router&gt;
                  &lt;Routes&gt;
          ...
                      &lt;Route
                          exact
                          path="/messages/chat/:id"
                          element={
                              &lt;ProtectedRoute&gt;
                                  &lt;Chat /&gt;
                              &lt;/ProtectedRoute&gt;
                          }
                      /&gt;
                      
                  &lt;/Routes&gt;
              &lt;/Router&gt;
          &lt;/&gt;
      );
  };
  export default Routing;</code></pre>
  </div>
  </div>
  </p>